hasClass的jQuery總是給人「假」

Updated DEMO Link hasClass的jQuery總是給人「假」

我分別有2個的div，每個DIV我'添加類「使命活躍」的點擊：一旦第一個div點擊是被添加的類，然後再我'點擊另一個div。我正在尋找父div和刪除類，並添加到當前點擊的元素（就像單選按鈕）。

問題：每當我嘗試檢查if($(this).parent('').hasClass)時，它總是返回false。

HTML : 
<div class="full-page-width"> 


<div class="doctor-wrap clrfix"> 
      <div class="doctor-left"> 
       <div class="doc-img"> 
        <img src="http://i.istockimg.com/image-zoom/84647033/3/380/339/stock-photo-84647033-young-woman-lying-in-the-grass.jpg" alt="doctor select"></div> 
       <span class="doctor-txt">Tự chọn bác sĩ yêu thích</span> 
      </div> 
      <div class="doctor-right"> 
       <div class="doc-img"> 
        <img src="http://i.istockimg.com/image-zoom/84647033/3/380/339/stock-photo-84647033-young-woman-lying-in-the-grass.jpg" alt="doctor select"></div> 
       <span class="doctor-txt">Giúp chọn <br> bác sĩ phù hợp nhất</span> 
      </div> 
     </div> 
    </div> 



Image Courtsey : http://www.istockphoto.com/ 


JS : 

     /*--- Doctor List Filter Starts ---*/ 
     $('#search-criteria').keyup(function() { 
      var searchStr = $(this).val().toUpperCase(); 

      $(".doctor-profile").each(function() { 
       var isMatch = $(this).text().toUpperCase().indexOf(searchStr) > -1; 
       $(this)[isMatch ? "show" : "hide"](); 

      }); 
     }); 
     /*--- Doctor List Filter Ends ---*/ 


     /*--- Mission Page Starts ---*/ 

     console.log('hello'); 

     // Hide all divs on load 
     $('.select-doctor').hide(); 


     var step1, step2, step2prev, step2next, step3, step4, step5; 

     step1  = ".btn-1 img, #edit-submit--2"; 
     step2prev = ".doctor-left-btn img"; 
     step2next = ".doctor-right-btn img"; 
     chooseDoctor= ".doctor-left .doc-img"; 
     randomDoctor= ".doctor-right .doc-img"; 



     $(step1).on('click', function(){ 
      $('#fw_content').find('.pane-vietnam-enfa-plus-vietnam-doctor-list-form, .btn-1').fadeOut("fast"); 
      $('#fw_content').find('.select-doctor').fadeIn("fast"); 
     }); 

     $(step2prev).on('click', function(){ 
      $('#fw_content').find('.pane-vietnam-enfa-plus-vietnam-doctor-list-form, .btn-1').fadeIn("fast"); 
      $('#fw_content').find('.select-doctor').fadeOut("fast"); 
     }); 

     $(step2next).on('click', function(){ 
      $('#fw_content').find('.doctor-wrap, .doctor-btn-wrap').fadeOut("fast"); 
      $('#fw_content').find('#flexslider-1, .pane-vietnam-enfa-plus-vietnam-enfa-plus-form').fadeIn("fast");    
     }); 

     $(chooseDoctor).on('click', function(){ 
      if($(this).parent('.doctor-wrap .doctor-left .doc-img').hasClass('mission-active')){ 
       $(this).removeClass('mission-active'); 
       alert('true 1'); 
      } 
      else { 
       $(this).addClass('mission-active'); 
      } 
      /* else if($(this).parent('.doctor-wrap').find('.doctor-right .doc-img').hasClass('mission-active')){ 
       alert('true 1.1 right'); 
      } */ 
     }) 
     $(randomDoctor).on('click', function(){ 

      if($(this).parent('.doctor-wrap').find('.doctor-left .doc-img').hasClass('mission-active')){ 
       $(this).addClass('mission-active'); 
       alert('RIght Click true 1'); 
      } 
      else if($(this).parent('.doctor-wrap').find('.doctor-right .doc-img').hasClass('mission-active')){ 
       alert('RIght Click true 1.1 right'); 
      } 
     }) 

     /*--- Mission Page Ends ---*/

來源

2016-03-15 Syed Azam

我們需要的HTML。我的猜測是'.doctor-wrap'不是直接的父親....試試'.closest（'。doctor-wrap'）'。 –

沒有看到演示鏈接，最後，這不是猜測，這是問題。 –

@ Karl-AndréGagnon，我也添加了html .. 請看演示 - https://jsfiddle.net/stanze/bcnppybm/1/ –

問題是.parent（「醫生包」）

你必須做.parent 小號（「 .doctor換行」）

但是，你可以這樣做這樣的：

https://jsfiddle.net/bcnppybm/2/

$('.doc-img').click(function() { 
    $('.doc-img').each(function(){$(this).removeClass('mission-active');}); 
    if (!$(this).hasClass('mission-active')) { 
    $(this).addClass('mission-active'); 
    } 
})

來源

2016-03-15 13:03:21 Greg

hasClass的jQuery總是給人「假」

回答

相關問題