Question

长时间潜伏着第一次提问者！这是我的第一个问题，如果我的要求不正确，请道歉！

我似乎无法找到一个已被问过的问题。

我希望多个切换可以相互独立工作。

我从另一个帖子Jquery - How to have multiple toggle on one page?中选择了这个代码。我不完全理解为什么这个有效（但是效果很好）但是我想要改变扩展切换上的显示文本一旦点击就显示'隐藏'。

我设法只使用一个切换来完成此工作，但是使用多个切换它不起作用。我把两者的代码混合在一起，我可能会遗漏一些非常明显的代码。

我似乎无法解决这个问题，两者同时发生变化，我希望它们能够独立更改，而不必创建具有不同名称的多个函数。

我是javascript / jQuery的新手，所以我可能会遗漏一些非常明显的东西，或者根本不可能，但是你的帮助会非常感激！

这是我到目前为止的代码：

HTML

<div>
 <p><a class="toggle-trigger">Show</a><span>list 1</span><p>
 <div class="toggle-wrap">
  <div class="style-single">
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   </ul>
  </div>
 </div>

<p><a class="toggle-trigger">Show</a><span>list 2</span><p>
<div class="toggle-wrap">
 <div class="style-single">
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   </ul>
  </div>
 </div>

</div>

的jQuery

    $(".toggle-trigger").click(function() {
    $(this).parent().nextAll('.toggle-wrap').first().slideToggle();

                    var txt = $('.toggle-trigger').html();

            if (txt == 'hide'){
                    $('.toggle-trigger').html('show');
            } else {
                    $('.toggle-trigger').html('hide');
            }


});

Answer 1

看起来你忘记了结束div。您也无法在相同的选择器上使用相同的功能。此外，你的文字是你想要的完全相反，这可能会令人困惑。

试试这个：（编辑：让代码更具可读性）

$(".toggle-trigger").click(function() {
    $(this).parent().nextAll('.toggle-wrap').first().slideToggle();

            var txt = $('.toggle-trigger').html();

            if (txt == 'Hide '){
                    $('.toggle-trigger').html('Show ');
            } else {
                    $('.toggle-trigger').html('Hide ');
            }


});


$(".toggle-trigger-2").click(function() {
    $(this).parent().nextAll('.toggle-wrap').first().slideToggle();

        var txt = $('.toggle-trigger-2').html();

        if (txt == 'Hide '){
                $('.toggle-trigger').html('Show ');
        } else {
                $('.toggle-trigger').html('Hide ');
        }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p><a class="toggle-trigger" style="color: blue; ">Show </a><span>list 1</span><p>
  <div class="toggle-wrap">
      <div class="style-single">
         <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
         </ul>
      </div>
  </div>
</div>

<div>
  <p><a class="toggle-trigger-2" style="color: blue; ">Show </a><span>list 2</span><p>
    <div class="toggle-wrap">
       <div class="style-single">
           <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
           </ul>
        </div>
    </div>
</div>

Answer 2

您应该使用$(this)指向当前元素。使用类选择器再次指向具有相同类的所有元素

如下所示更改脚本，它应该按预期工作。您不必在HTML中进行任何更改

    $(".toggle-trigger").click(function() {
        $(this).parent().nextAll('.toggle-wrap').first().slideToggle();

        var txt = $(this).html();

        if (txt == 'hide'){
                $(this).html('show');
        } else {
                $(this).html('hide');
        }
    });

Answer 3

我从另一个帖子中获取了这个代码Jquery - 如何在一个页面上进行多个切换？我不完全理解为什么这样有效（但效果很好）

$(this).parent().nextAll('.toggle-wrap').first().slideToggle()

平均值

我获得了点击的元素（.toggle-trigger）
转到其父级（p）
获取所有父母的下一个兄弟姐妹
选择第一个（.toggle-wrap）
slideToggle()就可以了

如前面的答案中所述，您的问题是您正在更改.toggle-trigger类的所有元素的文本。

我使用了不同的方法来解决它。我为每个列表创建了一个父div来切换。此外，我在slideToggle()调用上使用了回调函数，以便在.toggle-trigger完成后更改slideToggle()文本。你可以在这里试试：https://jsfiddle.net/57025Lco/

jQuery多个切换显示/隐藏文本更改

3 个答案: