如何更改按钮而不影响其他按钮？

我有一个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行或顶部有任何影响控制。

如何才能实现这一目标，此刻我如果else语句只为顶部控制面板上的按钮（因为它的ID），但不与任何行的工作。

来源

2012-07-11 user1394925

你可以代替使用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-11 14:07:35

如何更改按钮而不影响其他按钮？

回答

相关问题