Question

我展示了许多品牌，但我想只显示前5个并且看到更多品牌文字。我已经正确设置了一切，功能也很好，但点击后我想改变文字，看看更多的品牌，看看更少的品牌。

<li style="font-size:12px; margin-left:2px;" class="showmorebrands">
<a onclick="$('#morebrands').toggle('fast', function() {  });">Show More Brands</a></li>

我尝试了内部文字，但这会更改文字和HTML，因此我的按钮不再有效。

我感谢所有人的帮助。

谢谢。

编辑：

morebrands具有内联样式显示：无;

Answer 1

试试这个

$(function(){
   $("li.showmorebrands a").click(function(){
      var $this = $(this);
      $('#morebrands').toggle('fast', function() { 
         if($('#morebrands').is(":visible")){
            $this.html("Show More Brands");
         }
         else{
            $this.html("Show Less Brands");
         }
      });
   });
});

Answer 2

我会做这样的事情：

<li style="font-size:12px; margin-left:2px;" class="showmorebrands">
    <a>Show More Brands</a>
</li>
<script type="text/javascript">
  $(function() {
    var $moreBrands = $('#moreBrands'),
        $showHideBrands = $('.showmorebrands a');

    $showHideBrands.click(function(event) {
      $moreBrands.toggle(
        'fast', 
        function() {
          $showHideBrands.text(
            $moreBrands.is(':visible') ? 'Show Less Brands' : 'Show More Brands');
        }
      );
      event.preventDefault();
    });
  });
</script>

Answer 3

尝试：

$('#morebrands').toggle('fast', function() { $(this).text('Show less brands') });

jquery更改文本onclick问题

3 个答案: