javascript - トグルjqueryの上にテキストを変更します

Question

私はこれらをたくさん持っており、ユーザーが[最大化]をクリックすると、divが展開されてコンテンツが表示されます。コンテンツが下に切り替わると、下部に最小化するリンクが表示されます。そのリンクをクリックすると正しく切り替わります。現在、jQueryはクリックされたリンクのテキストのみを変更するため、最初のリンクのテキストを変更する方法を探しています。これを簡単に行う方法はありますか？何かを使用しParent()てChild()からトップテーブルに戻るにはa？

トグルするときは、両方 #bridgeを+ Expandまたはに変更する必要があり- Minimizeます。

javascript

<script type="text/JavaScript" language="javascript">
    $(document).ready(function() {
        $(".expand").click(function(e) {
            e.preventDefault();
            var toggle = $(this).attr('href');

            var txt = $(this).text() == '+ Expand' ? '- Minimize' : '+ Expand';
            $(this).text(txt);
            $(toggle).slideToggle('fast', function() {                

            });

        });
    });
</script>

HTML

<!--Drop Down -->
    <div>
        <b class='bdrround'>
        <b class='bdrround1'><b></b></b>
        <b class='bdrround2'><b></b></b>
        <b class='bdrround3'></b>
        <b class='bdrround4'></b>
        <b class='bdrround5'></b></b>
        <div class='bdrroundfg'>
            <table width='100%' class='pagehead'>
                <tr>
                    <td width='80%' class='pagehead'>
                    <h2><a name='bureau'></a>Approved Bridging Statements (Optional):</h2>
                </td>
                <td width='20%' class='pagehead'>                    
                        <p align='right'><a href='#bridge' id="expand" class='expand'>+ Expand</a></p>                           
                </td>
                </tr>
             </table>
            <div id='bridge' class='faqcontainer' style='display:none;'>
                <p>
                    <b>Operational Direction: </b>These should be used to bring the customer back into the conversation and 
                    to transition into FAQs, Resolving Objections and overall general conversational flow.  
                    These statements are designed to let the customer know that we are listening, that his/her opinion is 
                    important and that we realize the value of that opinion.
                </p>
                <p>
                    <b>BRIDGING STATEMENTS:</b>
                    <ul>
                        <li>Now with that in mind &hellip;</li>
                        <li>That's an excellent question&hellip;</li>
                        <li>I hear what you are saying and&hellip;</li>
                        <li>I can (certainly) understand that and&hellip;</li>
                        <li>That's a very good point&hellip;</li>
                        <li>Please keep in mind&hellip;</li>
                        <li>I can understand your hesitation, but&hellip;</li>
                        <li>I can appreciate that&hellip;</li>
                        <li>Thank you </li>
                        <li>Perfect </li>
                        <li>Great </li>
                        <li>One moment please </li>
                        <li>Excellent</li>
                        <li>That’s great, now&hellip;</li>
                        <li>That’s correct</li>
                        <li>Let me clarify that for you</li>
                    </ul>
                    <span class="note">Note to Rep: </span>Use of Mr. or Ms. can be added throughout the call as appropriate 
                        to help build rapport with the customer.
                </p>
                <p>
                    <span class="note">[Note to Rep: Ensure all service needs are satisfied before offering.]</span>
                </p>
                <p>
                    [<span class="note">Directional:</span> If during the servicing of the call the customer mentioned 
                    they were retired, unemployed, or working less than 30 hours per week, go to: 
                    <a href="#">PS Basic Counter Offer Transition</a>]
                </p>
                <p align='right'><a href="#bridge" id="A2" class='expand'>- Minimize</a></p>
            </div>
            <b class='bdrround'>
            <b class='bdrround5'></b>
            <b class='bdrround4'></b>
            <b class='bdrround3'></b>
            <b class='bdrround2'><b></b></b>
            <b class='bdrround1'><b></b></b></b>
        </div>
        <div class='hrSectDiv'></div>
    </div>

Answer 1

hrefを使用し#some-idて要素を切り替えるのではなく、再利用可能なすべてのボタンの共通の親を配置varします。

jsBinデモ

1. .slide_contentスライド可能なすべての要素にクラスを追加します（ .faqcontainer）（または.faqcontainer、上記の代わりに使用します。一般的なクラスかどうかはわかりませんでした）

2. 共通する親要素を見つける必要があります。-ボタンと-を使用した1つのスライド可能なコンテンツ.closest()...すばらしい！あなたは1つ持っています！それは<div class='bdrroundfg'> !!!
   varで彼を使用しましょう：var common_parent = $(this).closest('.bdrroundfg');

ここで、jQにその要素（子ボタンとスライド可能なコンテンツ）を取得させる必要があります。

    var slide_content = common_parent.find('.slide_content'); // the added class!
    var all_buttons   = common_parent.find('a.expand');       // both buttons

.eq(0)クリックすると、最初の（ ）ボタンのテキストを切り替える必要があります

     var txt = $(this).text() === '+ Expand' ? '- Minimize' : '+ Expand';
     all_buttons.eq(0).text(txt); // target only the first one in the collection

コードは次のようになります。

 $(".expand").click(function(e) {
     e.preventDefault();
     var common_parent = $(this).closest('.bdrroundfg');
     var slide_content = common_parent.find('.slide_content'); // the added class!
     var all_buttons   = common_parent.find('a.expand');   
         
     var txt = $(this).text() === '+ Expand' ? '- Minimize' : '+ Expand';
     all_buttons.eq(0).text(txt);    // toggle text - first button only!     
 
     $(slide_content).slideToggle('fast', function(){
          // do something here...
     });
 
 });

Answer 2

これを試して：

 if (this.id == 'A2') {
     $('#expand').text("+ Expand")
 }

デモ