jquery - 单击时的单选按钮需要单独更改文本

Question

首先请访问这个小提琴并单击单选按钮：http: //jsfiddle.net/skfNh

单击单选按钮时，您可能已经注意到两者中的两个文本 div class='letter'（带有黑色背景颜色）都发生了变化。我想单独做。我尝试过使用.each()功能，但没有奏效。如何才能做到这一点？

看看我正在尝试的当前 jQuery 代码：

$(".selections").append("<div class='letter'>A</div>");
$(".one").click(function () {
    $(".letter").text("B");
});
$(".two").click(function () {
    $(".letter").text("A");
});

Answer 1

在这种情况下，您需要找到letter带有单击单选按钮的 parent selections。

$(".selections").append("<div class='letter'>A</div>");
$(".one").click(function () {
    $(this).closest('.selections').find('.letter').text("B");
});
$(".two").click(function () {
    $(this).closest('.selections').find('.letter').text("A");
});

演示：小提琴

Answer 2

$(".one, .two").click(function() {
    var $this = $(this),
        text = $this.hasClass('one') ? 'B' : 'A';
    $this.parent().siblings(".letter").text(text);
});

http://jsfiddle.net/4y5DX/

Answer 3

$('.selections').each(function() {
    var el = $(this),
        _one = el.find('.one'),
        _two = el.find('.two');

    el.append("<div class='letter'>A</div>");

    var letter = el.find('.letter');

    _one.click(function () {
        letter.text("B");
    });

    _two.click(function () {
        letter.text("A");
    });
});

Answer 4

最简单的方法是在字母类上设置一个 id 属性。然后这样做：

$("#firstletter").text("B");
$("#secondletter").text("B");

应该替换：

$("letter") calls