多个显示/隐藏按钮，单击时按钮文本更改答案

【问题标题】：Multiple show/hide buttons with button text change on click多个显示/隐藏按钮，单击时按钮文本更改
【发布时间】：2016-06-01 11:42:38
【问题描述】：

我有一个带有几个按钮的 wordpress 页面，显示/隐藏某个 div，按钮文本也根据按钮单击从“更多信息”变为“更少信息”。

到目前为止，这是我的代码，但由于我有多个按钮，当然每次单击一个时，都会为所有隐藏的 div 和按钮文本执行代码。

代码是什么样的，它一次只影响一个实际点击/隐藏的按钮？

这是 HTML：

<a class="clicker reveal" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;">MORE INFOS</a>

和 JS：

<script type="text/javascript">

    jQuery.noConflict();

    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
        jQuery(".slider").hide();

        jQuery('.reveal').click(function() {
            if (jQuery(this).text() === 'MORE INFOS') {
                jQuery(this).text('LESS INFOS');
            } else {
                jQuery(this).text('MORE INFOS');
            }
        });

        jQuery(".clicker").click(function(){
            jQuery(".slider").slideToggle("slow");

            jQuery.each(masterslider_instances, function(i, slider) {
                slider.api.update();
                slider.api.__resize(true);
                jQuery.each(slider.controls, function( index, control ) {
                    if (control.realignThumbs) control.realignThumbs();
                });

                jQuery.each(masterslider_instances, function(a,b){
                    b.api.update(true);
                });
            });  

        });
    });
</script>

和目标 div：

<div class="slider>Some content</div>

提前谢谢你！

【问题讨论】：

使用 id 选择器代替类
请粘贴与此按钮相关的 div。您应该在按钮和 div 之间进行一些引用以使其工作
粘贴的 div。我知道需要一个参考才能使其工作，但这正是我的问题，我不知道如何编写代码...... :(

标签： javascript jquery html

【解决方案1】：

更新

我被告知按钮在一个 div 中，更新反映了这个小变化：

发件人：

var tgt = $(this).next('.slider');

收件人：

var tgt = $(this).parent().next('.slider');

以下演示使用类方法。详细信息在 cmets 的源代码中提供。

片段

/*
Removed a chunk of meaningless code 
since there's no way of using it 
because the plugin isn't 
provided (I'm assuming).
*/

$(function() {

  /*
  Combined both the `more/less` and 
  `slideToggle()` features under one 
  class(`.reveal`) and one click event.
  */
  $('.reveal').on('click', function(e) {
    /*
    Prevent anchor from default behavior 
    of jumping to a location.
    */
    e.preventDefault();
    /*
    See if `.reveal` has class `.more`
    */
    var more = $(this).hasClass('more');
    /*
    `.tgt` is the next `.slider` after 
    `this`(clicked `a.reveal`).
    */
    var tgt = $(this).parent().next('.slider');
    /*
    Toggle `.reveal`'s state between `.more` and 
    `.less` classes. (See CSS)
    */
    if (more) {
      $(this).removeClass('more').addClass('less');
    } else {
      $(this).removeClass('less').addClass('more');
    }
    /*
    `slideToggle()` only the `div.slider` that 
    follows `this` (clicked `a.reveal`)
    */
    tgt.slideToggle('slow');
  });

});

.reveal {
  display: block;
}
.reveal.more:before {
  content: 'MORE INFO';
}
.reveal.less:before {
  content: 'LESS INFO';
}
.slider {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div>
<a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a>
</div>
<div class="slider">Some content</div>

<div>
<a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a>
</div>
<div class="slider">Some content</div>

<div>
<a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a>
</div>
<div class="slider">Some content</div>

【讨论】：

看起来不错，谢谢！但是，我试图合并我的其他东西并且它不起作用，是我把它放在错误的位置还是我杀死了语法？ jsfiddle.net/7jo1x6rc
那个额外的代码需要一个插件，你还记得任何类似这样命名的单独文件吗？：jquery.slider.js 或jquery.slider.min.js
@Mella，你必须有一个 WordPress 网站，MasterSlider 是一个免费的 WP 插件，还有一个 Pro 和 jQuery 付费版本。如果您使用的是免费版本，那么该额外代码取决于服务器端/WP。去here获取信息以下载和安装。
是的，你完全正确，我在 wp 网站中使用 masterslider。我需要执行这段代码，因为没有幻灯片由于隐藏/显示而看起来乱码。您的解决方案有效，但在我的情况下不是，因为我忘了提到按钮嵌套在另一个 div 中，所以它就像
那将是一个小修改，使用.closest 或.parent() 而不是.next()

【解决方案2】：

试试这个

 jQuery('.reveal').each(function(idx,item) {
  jQuery(item).click(function(){
    if (jQuery(this).text() === 'MORE INFOS') {
     jQuery(this).text('LESS INFOS');
    }
    else {
      jQuery(this).text('MORE INFOS');
    }

  });
});

这里正在工作Fiddle

【讨论】：

【解决方案3】：

使用 data 属性在锚点和 div 之间进行引用。

<a class="clicker reveal" data-target="slider-1" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;">MORE INFOS</a>

<div class="slider slider-1">Some content</div>

现在，您可以执行以下操作-

jQuery('.clicker').click(function() {
  var targetDiv = jQuery('.' + jQuery(this).attr('data-target'))
  if (jQuery(this).text() === 'MORE INFOS') {
    jQuery(this).text('LESS INFOS');
    targetDiv.slideDown('slow');
  } else {
    jQuery(this).text('MORE INFOS');
    targetDiv.slideUp('slow');
  }

  // do the rest of your stuff here
});

【讨论】：