代码之家  ›  专栏  ›  技术社区  ›  Dev

停止所有按钮上的按钮文本更改

  •  0
  • Dev  · 技术社区  · 7 年前
    $('.entry-content #toggle').click(function() {
    
    var elem = $('#toggle').text();
    
    if (elem == 'Read More') {
    
    $('.entry #toggle').text('Read Less');
    
    } else {
    
    $('.entry #toggle').text('Read More'); 
    
    }
    
    });  
    

    这个jQuery更改归档页面上每篇文章上所有按钮上的按钮文本。我只想让它改变被点击的按钮。

    <div id="toggle" class="btn">Read More</div>
    
    <div class="text" />
    

    更新2:

    $('#toggle').click(function() {
    
    $(this).closest('.post').find('.text').slideToggle();
    
    $(this).text(function( i, v ) {
    
       return v === 'Read More' ? 'Read Less' : 'Read More'
    
    
          });
    });
    
    3 回复  |  直到 7 年前
        1
  •  1
  •   dvr    7 年前

    在事件中引用您自己的按钮。

    $('.entry-content #toggle').click(function() {
    
    var elem = $(this).text();
    
    if (elem == 'Read More') {
    
    $(this).text('Read Less');
    
    } else {
    
    $(this).text('Read More'); 
    
    }
    
    });  
    

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

        2
  •  1
  •   Saw Zin Min Tun    7 年前

    $('#toggle').click(function() {
    
        var elem = $(this).text();
    
        if (elem == 'Read More') {
            $(this).text('Read Less');
        } else {
            $(this).text('Read More'); 
        }
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="toggle" class="btn">Read More</div>
    
    <div class="text" />
        3
  •  1
  •   user8493027 user8493027    7 年前

    简化代码。

    $('#toggle').click(function() {
        $(this).text(function(i, v){
           return v === 'Read More' ? 'Read Less' : 'Read More'
        });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="toggle" class="btn">Read More</div>
    
    <div class="text" />