jQuery不改变标签中的文字

Question

我试图用jQuery改变点击时标签的文字。从堆栈溢出的其他问题，这应该是正确的，但由于某种原因，它不工作。

该文本是一个“读取更多”行，触发div块的显示/隐藏。

显示/隐藏部分有效，但“阅读更多”的文本应根据情况切换到“关闭”。有什么建议么？

这是JavaScript，在头加载（jquery的也由该时间加载）：

</script> 
    $(document).ready(function() { 

    $('.faq_question').click(function() { 

     if ($(this).parent().is('.open')){ 
      $(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500); 
      $(this).closest('.faq').removeClass('open'); 
      $(this).closest('.faq_toggle h4').text('Read More'); 

      }else{ 
       var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px'; 
       $(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500); 
       $(this).closest('.faq').addClass('open'); 

       $(this).closest('.faq_toggle h4').text('Close'); 

      } 

    }); 

}); 
</script> 

这是CSS：

.faq_question { 
    margin: 0px; 
    padding: 0px 0px 5px 0px; 
    display: inline-block; 
    cursor: pointer; 
    font-weight: bold; 
} 

.faq_answer_container { 
    height: 0px; 
    overflow: hidden; 
    padding: 0px; 
} 

.faq_toggle { 
    color: #00adef; 
} 

最后，标记：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<div class="std">​ 

<div class="faq_container"> 
    <div class="faq"> 
     <div class="faq_answer_container"> 
       <div class="faq_answer">​ 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
       </div> 
     </div>  
     <div class="faq_question"><h4 class="faq_toggle"><strong>Read more</strong></h4></div> 
    </div> 
</div>​ 

</div>​ 

如上所述，显示/隐藏工作，但“阅读更多”文本不会切换到“关闭”。

Answer 1

在您的代码中，this指的是您点击的元素，即.faq_question。

由于.faq_toggle是孩子.faq_quesetion，你可以从.faq_question使用closest()不能穿越到.faq_toggle。

最近（）：对于组中的每一个元素，获取通过测试元件本身和DOM树遍历了通过它的祖先选择相匹配的第一个元素。

我建议使用find()，或者如下面的示例所示，一个context selector：

$(document).ready(function() { 
 

 
    $('.faq_question').click(function() { 
 

 
    if ($(this).parent().is('.open')) { 
 

 
     $(this).closest('.faq').find('.faq_answer_container').animate({ 
 
     'height': '0' 
 
     }, 500); 
 
     $(this).closest('.faq').removeClass('open'); 
 
     $('.faq_toggle', this).text('Read More'); 
 

 
    } else { 
 

 
     var newHeight = $(this).closest('.faq').find('.faq_answer').height() + 'px'; 
 
     $(this).closest('.faq').find('.faq_answer_container').animate({ 
 
     'height': newHeight 
 
     }, 500); 
 
     $(this).closest('.faq').addClass('open'); 
 
     $('.faq_toggle', this).text('Close'); 
 

 
    } 
 

 
    }); 
 

 
});

.faq_question { 
 
    margin: 0px; 
 
    padding: 0px 0px 5px 0px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
} 
 
.faq_answer_container { 
 
    height: 0px; 
 
    overflow: hidden; 
 
    padding: 0px; 
 
} 
 
.faq_toggle { 
 
    color: #00adef; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="std"> 
 

 
    <div class="faq_container"> 
 
    <div class="faq"> 
 
     <div class="faq_answer_container"> 
 
     <div class="faq_answer"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
     </div> 
 
     </div> 
 
     <div class="faq_question"> 
 
     <h4 class="faq_toggle"><strong>Read more</strong></h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

---

另外，作为mentioned by mospans，一个.faq_toggle h4选择器将选择的<h4>元件那是.faq_toggle的孩子。相反，你想用类.faq_toggle选择一个<h4>元素：

$('h4.faq_toggle') 

或只是

$('.faq_toggle') 

Answer 2

In string $(this).closest('.faq_toggle h4').text('Close'); replace .faq_toggle h4 by h4.faq_toggle。因为.faq_toggle h4选择h4在类faq_toggle中。

Answer 3

你.faq_toggle是内的.faq_question，所以你需要使用.find（） ，而不是.closest（）（其上涨/下跌）。结合。faq_toggle是H4，里面没有H4，得出：

$(this).find('h4.faq_toggle').text('Read More'); 
... 
$(this).find('h4.faq_toggle').text('Close'); 

工作小提琴：https://jsfiddle.net/nfc26s9r/