javascript - 更改切换 jquery 顶部的文本

Question

我有一堆这样的，当用户单击最大化 div 时会展开以显示内容。内容向下切换后，底部的最小化链接可见。单击该链接时，它将正确切换，我只是在寻找一种更改第一个链接中的文本的方法，因为当前 jQuery 仅更改单击的链接的文本。有没有办法轻松做到这一点？有什么东西使用Parent()然后Child()重新回到顶级表中a？

切换时，它应该同时 #bridge更改为 be+ 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

不要使用#some-idhref 来切换你的元素，而是放入一个可重用var的全按钮的 common parent。

jsBin 演示

1. .slide_content向所有可滑动元素 ( )添加一个类.faqcontainer（或者只使用.faqcontainer而不是提到的，我不确定它是否是一个通用类）

2. 完成后，我们必须找到共同的父元素： - 按钮和 - 一个可滑动的内容使用.closest()......太好了！你有一个！是<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")
 }

演示