Question

我在下面有一个if else语句，它打开和关闭按钮，具体取决于其他按钮是打开还是关闭。这涉及2个按钮，“是”或“否”。

function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }
    var $btn = $(btn);
    var id = btn.id;
    var $otherYNBtn = id === "answerYes" ? $("#answerNo") : $("#answerYes");

$(btn).toggleClass("answerBtnsOff");
$(btn).toggleClass("answerBtnsOn");

    if ($("#answerYes", context).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($("#answerNo", context).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }


    return false;
}

现在，此代码适用于下面显示在顶部的按钮：

<table id="optionAndAnswer" class="optionAndAnswer">

...

<input class="answerBtns answers answerBtnsOff" name="answerYesName"   id="answerYes"   type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerNoName"    id="answerNo"        type="button"   value="No"      onclick="btnclick(this);"/>

现在我的情况显然它只适用于上面的按钮，但是用户可以通过将这些按钮添加到新行中来将这些按钮添加到新行中。将这些按钮附加到新行的代码如下：

var $this;
$('#optionAndAnswer .answers').each(function() {
    $this = $(this);

    var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id')+'Row');


    $newBtn.appendTo($cell);

    i++;
});

上面的代码将顶部按钮中的所有属性（名称，类，id）复制到一个新行中，但唯一的区别是附加按钮的id包含末尾的字符串“Row”。 id。

我的问题是，我想要做的是更改我的if / else if函数，以便它适用于所有2个按钮，无论它们是在顶部，还是在第1行或第2行等等。

例如：

如果顶部控件上有“是”和“否”按钮，第1行中有“是”和“否”按钮，第2行中有“是”和“否”按钮，则所有这些按钮均打开“是”按钮。
如果我点击顶部控制中的“否”按钮，它应该打开“否”按钮并关闭顶部控件中的“是”按钮，它不应该对第1行有任何影响或2.
- 如果我点击第1行中的“否”按钮，它应该打开“否”按钮并仅关闭第1行中的“是”按钮，它不应对第2行或最高控制。
- 如果我点击第2行中的“否”按钮，它应该打开“否”按钮并仅关闭第2行中的“是”按钮，它不应对第1行或最高控制。

如何实现这一点，目前我的if else语句仅适用于顶部控件上的按钮（因为它的id），但不适用于任何行。

Answer 1

您可以使用context.find("input[value='NO']")代替$("#answerNo") 或者，如果您希望它更具国际化和HTML5方式，您可以尝试使用微数据属性data-*：

<input data-value="yes" class="answerBtns answers answerBtnsOff" 
type="button" value="Oui" onclick="btnclick(this);"/>

<input data-value="no" class="answerBtns answers answerBtnsOff" 
type="button" value="Non" onclick="btnclick(this);"/>

在jQuery中，使用context.find("input[data-value='no']")

如何在不对其他按钮产生任何影响的情况下更改按钮？

1 个答案: