Jquery mobile：リストビューのヘッダーを変更してください

Question

私は幾分単純な質問であると思っていたものの答えを見つけました。私が見たすべての答えは、動作しない '.text（）'を使うと言っています。 jQueryのモバイルで

、私は単に私がそのリストビューで選択したラジオボタンのテキストでリストビューでヘッダーテキストを置き換えたいです。簡単にするために、単にリストビューでヘッダーのテキストを動的に変更するだけで十分です。問題は、一部のHTMLを削除せずにリストビューのヘッダーのテキストを動的に変更できないことです。

• コルドババージョン：私は、以下のものを使用してAndroidデバイス上でテストしてい

  Jquery Mobile: Dynamically change the text of the header of a collapsible div?

  https://forum.jquery.com/topic/how-can-i-dynamically-change-the-text-of-a-collapsible

  jQuery mobile: Dynamically updating collapsible heading causes loss of styling

  ：私は含めstackoverflowのと他のサイトから多数の提案を試してみました：6.3.1

• jQueryの1.11.0
• jQueryのモバイル1.4.5

HTMLは：

<div data-role="page" id="test"> 

<div role="main" class="ui-content"> 
    <div class="ui-grid-a multiple-inputs"> 
     <div class="ui-block-a"> 
      <ul data-role="listview" data-inset="true" data-shadow="false"> 
       <li data-role="collapsible" data-iconpos="right" data-inset="false"> 
        <h2 id="h2-test-area">Area</h2> 
        <form> 
         <fieldset data-role="controlgroup"> 
          <input type="radio" name="rad-test-area" id="rad-test-area-0-1" value="0"> 
          <label for="rad-test-area-0-1">Abdomen</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-1-1" value="1"> 
          <label for="rad-test-area-1-1">Arms</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-2-1" value="2"> 
          <label for="rad-test-area-2-1">Outer thigh</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-3-1" value="3"> 
          <label for="rad-test-area-3-1">Inner thigh</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-4-1" value="4"> 
          <label for="rad-test-area-4-1">Calves</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-5-1" value="5"> 
          <label for="rad-test-area-5-1">Flanks</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-6-1" value="6"> 
          <label for="rad-test-area-6-1">Chest</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-7-1" value="7"> 
          <label for="rad-test-area-7-1">Buttocks</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-8-1" value="8"> 
          <label for="rad-test-area-8-1">Back (lower and upper)</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-9-1" value="9"> 
          <label for="rad-test-area-9-1">Jaw line</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-10-1" value="10"> 
          <label for="rad-test-area-10-1">Chin</label> 
          <input type="radio" name="rad-test-area" id="rad-test-area-11-1" value="11"> 
          <label for="rad-test-area-11-1">Knee</label> 
         </fieldset> 
        </form> 
       </li> 
      </ul> 
     </div> 
     <div class="ui-block-b"> 
      <ul data-role="listview" data-inset="true" data-shadow="false"> 
       <li data-role="collapsible" data-iconpos="right" data-inset="false"> 
        <h2>Relevant treatments:</h2> 
        <form> 
         <fieldset data-role="controlgroup"> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-1"> 
          <label for="cb-test-1-1">Fillers</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-2"> 
          <label for="cb-test-1-2">Botox</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-3"> 
          <label for="cb-test-1-3">Dermaroller</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-4"> 
          <label for="cb-test-1-4">HydraFacial</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-5"> 
          <label for="cb-test-1-5">FSR</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-6"> 
          <label for="cb-test-1-6">Laser</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-7"> 
          <label for="cb-test-1-7">Ping</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-8"> 
          <label for="cb-test-1-8">Endymed</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-9"> 
          <label for="cb-test-1-9">Chemical Peel</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-10"> 
          <label for="cb-test-1-10">Aqualyx</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-11"> 
          <label for="cb-test-1-11">Hyalase</label> 
          <input type="checkbox" name="cb-test-1" id="cb-test-1-12"> 
          <label for="cb-test-1-12">Tretinion and Hydroquinone (Obagi)</label> 
         </fieldset> 
        </form> 
       </li> 
      </ul> 
     </div> 
    </div><!-- /grid-a --> 

</div><!-- /content --> 

</div><!-- /test page --> 

これは私が前にレンダリングのようなルックスを操作しようとしていますどのようなHTMLです：

<h2 id="h2-test-area">Area</h2> 

テキスト「エリア」は私が変更したいものです。

これは、HTMLは、私が後にレンダリングするように見える操作しようとしているものです：

<h2 id="h2-test-area" class="ui-collapsible-heading"> 
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-minus"> 
     Area 
     <span class="ui-collapsible-heading-status"> click to collapse contents</span> 
     ::after 
    </a> 
</h2> 

Javascriptを：

$("input[name='rad-test-area']").on("change", function() { 
    $("#h2-test-area a.ui-collapsible-heading-toggle").text("new text"); 
}); 

私は上記のJavaScriptを実行すると、それは私はそれがしたいテキストを置き換えるのが、 HTMLのテキスト「エリア」の後に続くスパンも置き換えます。 HTMLをはっきりと取り除くと '.text（）'が動作すると誰もが言っているのはなぜですか？助けをありがとうございました。

Answer 1

あなたは、SPAN要素を変更するテキストを囲むことにより、あなたの人生を容易にすることができます。

<h2 id="h2-test-area"><span id="h2-test-area-span">Area</span></h2> 

その後、あなたは簡単にそのスパン上）（.textの使用することができます。

$("input[name='rad-test-area']").on("change", function() { 
    $("#h2-test-area-span").text("new text"); 
}); 

を

DEMO

Answer 2

テキストの代わりにhtml replaceを使用して、htmlコンテンツを保存してみてください。

$("input[name='rad-test-area']").on("change", function() { 
    $("#h2-test-area a.ui-collapsible-heading-toggle").html().replace("Area", "new text"); 
});