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の子あるので、あなたはclosest()を使用して.faq_toggleに.faq_questionからトラバースすることはできません。

最も近い

（）セット内の各要素について、要素自体をテストし、DOMツリー内のその祖先を通してまでをトラバースすることによってセレクタに一致する最初の要素を取得します。

$(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>要素を選択します：私は、以下の私の例のように、context selectorをfind()を使用するか、または示唆

それは.faq_toggleの子です。代わりに、クラス.faq_toggleで<h4>要素を選択します：

$('h4.faq_toggle') 

か、単に

$('.faq_toggle') 

Answer 2

文字列$(this).closest('.faq_toggle h4').text('Close');の場合は、.faq_toggle h4をh4.faq_toggleに置き換えます。 .faq_toggle h4は、faq_toggleクラスのh4内部要素のセレクタです。

Answer 3

あなたは.find使用する必要があるので、あなたの.faq_toggleは、 .faq_question内部です（） .closest（）ではなく、up/outになります。と組み合わせ 。faq_toggleはなく、その中にH4 H4、ある与えます：

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

の作業フィドル：https://jsfiddle.net/nfc26s9r/