Question

我有一些类似的文字（“关于我们的更多信息”），当我再次点击时点击并更改后，我已将其更改为另一个（“Less about us”）。但现在我需要一个解决方案，当我点击一个（例如第一行，只有一次），然后点击另一个（这次是第二行），第一行（现在显示“少关于我们”）改回“更多关于我们“虽然第二行仍然改为”少关于我们“。

HTML

<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span>

JS

$('.more').click(function() {
    var s = $(this);
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
});

This is the demo

Answer 1

将您的Javascript更改为：

$('.more').click(function() {
    var s = $(this);
    var originaltext= s.text();
    $('.more').text('More about us');  
      s.text(originaltext);
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');

});

它做了什么：

存储当前点击范围的text。
将所有跨度更改为“关于我们的更多信息”。
将当前文字更改为原文。
继续正常功能。

请参阅小提琴：“http://jsfiddle.net/HFcvH/35/”

编辑：这也可以使用.siblings()完成，如下所示：

$('.more').click(function() {
    var s = $(this);

    $(this).siblings().each(function() {
        $(this).text('More about us');  
    });

    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');

});

说明：这将遍历当前元素的所有兄弟节点并重置其文本。

请参阅小提琴：“http://jsfiddle.net/ee24gcdj/1/”

可以使用（感谢Ted Nyberg获取信息）进一步减少：

$(this).siblings().text('More about us')

Answer 2

使用 .not() 选择器从搜索结果列表中排除点击的选项卡，这里是您需要的代码：

＆＃13;

$('.more').click(function() {
  var s = $(this);
  s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
  $('.more').not($(this)).each(function() {
    $(this).html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="more">More about us</span>
<br/>
<span class="more">More about us</span>
<br/>
<span class="more">More about us</span>
<br/>
<span class="more">More about us</span>
<br/>
<span class="more">More about us</span>

＆＃13;

它完美运作。

Answer 3

这是小提琴： http://jsfiddle.net/kge7dbLa/1/

$(".more").on("click", function() {
    var s = $(this);

    /*  Just add this line of Code  */
    $(".more").text('More about us');

    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
})

Answer 4

请参阅代码中的内联注释。

// When clicked on .more
$('.more').on('click', function() {

  // Text to be updated to current element
  var updateText = $(this).text() == 'More about us' ? 'Less about us' : 'More about us';

  // Update the text of elements
  $(this).text(updateText); // Set current element text

  $('.more').not(this).text('More about us'); // Set the text to the elements other than the clicked.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<span class="more">More about us</span>

<br/>
<br/>
<span class="more">More about us</span>

<br/>
<br/>
<span class="more">More about us</span>

<br/>
<br/>
<span class="more">More about us</span>

<br/>
<br/>
<span class="more">More about us</span>

jsfiddle Demo

Answer 5

怎么样......

$(this).siblings('.more').text('More about us')

...在设置刚刚点击的文本之前“重置”其他人？

完整代码如下：

$('.more').click(function() {
    var s = $(this);
    s.siblings('.more').text('More about us')
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
});

这更符合DRY，因为其他建议的答案会重复条件陈述。

Answer 6

试试这个：

var mores = $('span.more'); //cache all once
var more = 'More about us', less = 'Less about us', txt;
mores.on('click', function(e) {
   txt = this.innerHTML; //get old text
   mores.text(more); //reset all
   this.innerHTML = txt.match(more) ? less : more; //match against old text
});

＆＃13;

$(function() {
  var mores = $('span.more'); //cache all once
  var more = 'More about us',
    less = 'Less about us',
    txt;
  mores.on('click', function(e) {
    txt = this.innerHTML; //get old text
    mores.text(more); //reset all
    this.innerHTML = txt.match(more) ? less : more; //match against old text
  });
});

＆＃13;

span.more {
  border: 1px solid grey;
  cursor: pointer;
  padding: 5px 9px;
  display: inline-block;
  width: 110px;
  margin-bottom: 3px;
  border-radius: 5px;
  font-family: Calibri;
  background: ghostwhite;
  box-shadow: 0px 1px 1px;
}
span.more:hover {
  box-shadow: 0px 1px 2px;
}
span.more:active {
  box-shadow: 0px 1px 1px inset;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="more">More about us</span>
<span class="more">More about us</span>
<span class="more">More about us</span>
<span class="more">More about us</span>
<span class="more">More about us</span>

＆＃13;

更改文本onclick并将其他更改恢复为默认值？

6 个答案: