有没有更简单的方法来执行此脚本？

Question

我正在学习，并试图把一些jQuery。 诚然，我发现很难找到一个好的基础指南，尤其是在向页面添加多个操作时。

我在某处读到文档监听器只能使用一次。 我相信我在这里使用过两次，但不确定100％如何将其带入一个听众。

另外，因为我一直在一起学习一些脚本，所以我想我正在使用部分JavaScript和部分jQuery。 这个对吗？

批判下面的代码[有效]，以及有关如何最好地学习jQuery的任何建议，将最有帮助。 谢谢。

脚本1设置了一组3个单选按钮的样式，具体取决于单击哪个按钮。 脚本2将新的输入追加到窗体的底部。

var stateNo = <?php echo $HighestPlayerID; ?> + 1; 

$(document).on('click', 'input', function () {
    var name = $(this).attr("name");
    if ($('input[name="' + name + '"]:eq(1)')[0].checked) {
        $('label[name="' + name + '"]:eq(1)').addClass('nostate');
        $('label[name="' + name + '"]').removeClass('selected');
    }
    else {
        $('label[name="' + name + '"]').removeClass('nostate selected');
        if ($('input[name="' + name + '"]:eq(0)')[0].checked) {
            $('label[name="' + name + '"]:eq(0)').addClass('selected');
        }
        else {
            $('label[name="' + name + '"]:eq(2)').addClass('selected');
        }
    }
});


$(document).on('click', 'button[name=btnbtn]', function () {
    var stateName = 'state[' + stateNo + ']';
    var newPlayerAppend = `` +
        `<tr><td>` + 
        `<input type="hidden" name="state['` + stateNo + `'][PlayerID]" value="` + stateNo + `" /></td>` + 
        `<td><input name="` + stateName + `[Name]" value="Name"></td>` + 
        `<td><input name="` + stateName + `[Team]" type="radio" value="A">` +
        `<td><input name="` + stateName + `[Team]" type="radio" value="">` +
        `<td><input name="` + stateName + `[Team]" type="radio" value="B">` +
        `</td></tr>`;
    $("tbody").append(newPlayerAppend);
    stateNo++;
});

3个单选按钮输入的HTML

<td class="Choice">
<label name="state[1][Team]" class="teampick Astate ">A
<input name="state[1][Team]" type="radio" value="A" />
</label>
<label name="state[1][Team]" class="smallx nostate ">X
<input name="state[1][Team]" type="radio" value="" checked />
</label>
<label name="state[1][Team]" class="teampick Bstate">B
<input name="state[1][Team]" type="radio"  value="B" />
</label>
</td>

Answer 1

1. 您在2个地方使用匿名函数。 如果代码块移至命名函数，则整个代码将变得更易于维护。 通过提前告诉您错误可能位于哪个函数名称，它也有助于更好地进行调试。

2. 命名函数后，您将意识到您确实有2个事件监听器可供单击。 因此，将它们移到一个侦听器（或您可能要引用的一个功能）中并没有太大的好处。 这两个事件侦听器都附加在文档对象上，并侦听click事件。

3. 连字符时，类名总是更好。 a-state超过Astate 。

4. 如果可行，则是正确的代码，这是您一次询问正确性。

Answer 2

某些代码可以更简洁地编写，也可以采用jQuery的方式编写，但首先，我想强调一下您当前解决方案的问题：

如果不是浏览器尝试解决不一致问题，则以下代码将生成无效的HTML：

$("tbody").append(newPlayerAppend);

tbody元素不能将input元素作为直接子代。 如果您确实希望添加的内容成为表的一部分，则需要添加一行和一个单元格，然后在其中放置新的input元素。

这是我建议的代码，与您的代码大致相同：

$(document).on('click', 'input', function () {
    $('label[name="' + $(this).attr('name') + '"]')
        .removeClass('nostate selected')
        .has(':checked')
        .addClass(function () {
            return $(this).is('.smallx') ? 'nostate' : 'selected';
        });
});

$(document).on('click', 'button[name=btnbtn]', function () {
    $('tbody').append($('<tr>').append($('<td>').append(
        $('<input>').attr({name: `state[${stateNo}][PlayerID]`, value: stateNo, type: 'hidden'}),
        $('<input>').attr({name: `state[${stateNo}][Name]`, value: 'Name'}),
        $('<input>').attr({name: `state[${stateNo}][Team]`, value: 'A', type: 'radio'})
    )));
    stateNo++;
});

有两个处理程序没有问题。 它们处理不同的目标元素，即使它们处理相同的元素，也仍然不是一个真正的问题：DOM被设计为处理多个事件处理程序。

Answer 3

拥有多个听众是完全可以的，但是我通常更喜欢将所有内容都放在一个屋顶下。 考虑使代码尽可能简单，这样可以节省维护时间。

您可以使用$（function（）{}）或document.ready（） 。

$(document).ready(function() {

    $('input[type="radio"]').click(function() {
     var thisa = $(this).parent();
     var name = $(this).attr("name");
     // Remove :selected class from the previous selected labels.
      $('label[name="' + name + '"]').removeClass('selected');
      // Add conditional class with tenary operator.
      thisa.parent().hasClass("smallx") ? thisa.addClass('nostate') : thisa.addClass('selected');
    });

    $('button[name=btnbtn]').click(function() {
         var stateName = 'state[' + stateNo + ']';
            // Add TR and TD before appending the row to tbody
            var newPlayerAppend = `<tr><td>` + 
                `<input type="hidden" name="state['` + stateNo + `'][PlayerID]" value="` + stateNo + `" />` + 
                `<input name="` + stateName + `[Name]" value="Name">` + 
                `<input name="` + stateName + `[Team]" type="radio" value="A"></td></tr>`;

            $("tbody").append(newPlayerAppend);
            stateNo++;
    });
 });

希望这可以帮助。