1

I've got a 3 items that are clickable and need to have the text changed on click.

the HTML 

<div class="aaa">
  <p class="bbb">Hello</p>
</div>
<div class="aaa">
  <p class="bbb">Hello</p>
</div>
<div class="aaa">
  <p class="bbb">Hello</p>
</div>

and the jQuery

$('.aaa').on("click", function() {
  $('.bbb', this).text(function(_, oldText) {
    return oldText === 'Hello' ? 'Goodbye' : 'Hello';
  });
  return false;
});

My problem is I need to 'reset' the text if I click a different item. What do I need for this?

Here's the work so far on CodePen - http://codepen.io/sturobson/pen/zbunG

4

4 回答 4

2

您可以data-*为元素添加属性并将原始文本存储在这些属性中；

<div class="aaa">
  <p class="bbb" data-text='Hello'>Hello</p>
</div>
<div class="aaa">
  <p class="bbb" data-text='Hello'>Hello</p>
</div>
<div class="aaa">
  <p class="bbb" data-text='Hello'>Hello</p>
</div>


$('.aaa').on("click", function() {
   $('.bbb', this).text(function(_, oldText) {
       return oldText === 'Hello' ? 'Goodbye' : 'Hello';
   }).parent().siblings().find('.bbb').text(function(){
       return $(this).data('text');
   });
   return false;
});

http://codepen.io/anon/pen/LDudE

于 2013-10-10T09:03:05.863 回答
1

试试这个：演示 http://jsfiddle.net/ZPaU6/

正在使用的 API：

休息这应该有助于我认为:) 代码的原因

$('.aaa').on("click", function () {
    $(this).find('.bbb').text(function () {
        return $(this).text() === 'Hello' ? 'Goodbye' : 'Hello';
    });
    return false;
});
于 2013-10-10T09:00:53.173 回答
0

尝试

$('.aaa').on("click", function () {
    $('.bbb', this).text(function (_, oldText) {
        return oldText === 'Hello' ? 'Goodbye' : 'Hello';
    });
    return false;
});

$('.bbb').each(function(){
    var $this = $(this);
    $this.data('text', $this.text())
})
$('.reset').click(function () {
    $('.bbb').text(function (_, oldText) {
        return $(this).data('text');
    });
})

演示：小提琴

于 2013-10-10T09:01:08.383 回答
0

我建议你让它变得灵活并使用 data- 属性，以免将字符串限制为存储在 JS 中的字符串，并且不要每次都遍历 dom 来考虑性能。

HTML：

<div class="aaa">
  <p class="bbb" data-original="Hello" data-alternative="Goodbye">Hello</p>
</div>
<div class="aaa">
  <p class="bbb" data-original="Hello" data-alternative="Goodbye">Hello</p>
</div>
<div class="aaa">
  <p class="bbb" data-original="Hello" data-alternative="Goodbye">Hello</p>
</div>

JS：

// Store the elems in vars for quicker access
var $aaa = $('.aaa'),
    $bbb = $('.bbb');

// Loop through each click to get the index
$aaa.each(function(index) {
  $(this).on('click', function(e) {
    e.preventDefault();

    // Find the corresponding $bbb using the index of stored var
    var $currBBB = $bbb.eq(index);

    // If the text is the alternative text, do nothing
    if ($currBBB.text() === $currBBB.data('alternative')) {
      return;
    }

    // Otherwise, loop through $bbb's and reset their text to the original
    $bbb.each(function() {
      var $this = $(this);
      $this.text($this.data('original'));
    });

    // Set the relevant $bbb to the alternative text
    $currBBB.text($currBBB.data('alternative'));
  });
});

工作示例：http ://codepen.io/stowball/pen/uBqlE

于 2013-10-11T00:27:52.870 回答