0

我在下面有一个 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 在 id 的末尾包含字符串“Row”。

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

例如：

  • 如果我在顶部控件上有“是”和“否”按钮，第 1 行有“是”和“否”按钮，第 2 行有“是”和“否”按钮，所有这些按钮都打开了“是”按钮。

  • 如果我单击顶部控件中的“否”按钮，它应该打开“否”按钮并仅关闭顶部控件中的“是”按钮，它不应该对第 1 行或第 2 行有任何影响。

    • 如果我单击第 1 行中的“否”按钮，它应该打开“否”按钮并仅关闭第 1 行中的“是”按钮，它不应该对第 2 行或顶部控制有任何影响。

    • 如果我单击第 2 行中的“否”按钮，它应该打开“否”按钮并仅关闭第 2 行中的“是”按钮，它不应该对第 1 行或顶部控制有任何影响。

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

4

1 回答 1

0

您可以使用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']")

于 2012-07-11T14:07:35.220 回答