首页 文章

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

提问于
浏览 次
1

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

这是我的代码到目前为止，但由于我有多个按钮，当然每次我点击一个，代码将执行所有隐藏的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>

先感谢您！

javascript jquery html

3 回答

  • 0

    更新

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

    从：

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

    至：

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

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

    SNIPPET

    /*
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>
    回复于
  • 0

    试试这个

    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

    回复于
  • 0

    使用data属性在anchor和div之间 Build 引用 .

    <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
});
    回复于

相关问题