Question

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

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

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

继承人HTML：

<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>

和JS：

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

和目标div：

ID and Word

提前谢谢！

Answer 1

试试这个

 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

Answer 2

使用数据属性在anchor和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
});

Answer 3

更新

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

自：

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

要：

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

以下演示使用类方法。详细信息在评论的来源中提供。

段

＆＃13;

/*
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');
  });

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案:

更新

段