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，点击的单选按钮为父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");
});

演示：Fiddle

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

单选按钮onclick需要单独更改文本

4 个答案: