Javascript 有没有更简单的方法来编写这个脚本？

我正在学习并尝试组合一些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++;
});

var stateNo=+1；
$（文档）。在（'click'，'input'，函数（）{
var name=$（this.attr（“name”）；
如果（$（'input[name=“”+name+”]：等式（1）[0]。选中）{
$（'label[name=“”+name+”]：eq（1）”.addClass（'nostate'）；
$（'label[name=“”+name+“]”）。removeClass（'selected'）；
}
否则{
$（'label[name=“”+name+“]”）。removeClass（'nostate selected'）；
如果（$（'input[name=“”+name+”]：等式（0）[0]。选中）{
$（'label[name=“”+name+”]：eq（0）”.addClass（'selected'）；
}
否则{
$（'label[name=“”+name+”]：eq（2）”.addClass（'selected'）；
}
}
});
$（文档）。在（'click'，'button[name=btnbtn]'上，函数（）{
var stateName='state['+stateNo+']'；
var newPlayerAppend=`+
`` + 
`` + 
`` + 
`` +
`` +
`` +
``;
$（“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>

A.
X
B

有两个地方您正在使用匿名函数。如果代码块移动到一个命名函数，整个代码将变得更易于维护。它还可以提前告诉您错误可能位于哪个函数名，从而更好地进行调试

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

使用连字符时，类名总是更好<代码>a状态over

Astate

如果它起作用，它就是正确的代码，因为您曾经询问过正确性

有两个地方您正在使用匿名函数。如果代码块移动到一个命名函数，整个代码将变得更易于维护。它还可以提前告诉您错误可能位于哪个函数名，从而更好地进行调试

一旦你命名了函数，你就会意识到你确实有两个事件监听器用于单击。因此，在一个侦听器（或您可能引用的一个函数）中移动它们并没有多大好处。这两个事件侦听器都附加到文档对象上并侦听单击事件

使用连字符时，类名总是更好<代码>a状态over

Astate

如果它起作用，它就是正确的代码，因为您曾经询问过正确性

---

有些代码可以写得更简洁，或者更像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++;
});

$（文档）。在（'click'，'input'，函数（）{
$（'label[name=“”+$（this.attr（'name'）+“]））
.removeClass（'nostate selected'）
.has（“：选中”）
.addClass（函数（）{
return$（this）.is（'.smallx'）？'nostate'：'selected'；
});
});
$（文档）。在（'click'，'button[name=btnbtn]'上，函数（）{
$（'tbody'）.append（$（''）.append（$（''）.append(
$（''）.attr（{name:`state[${stateNo}][PlayerID]`，值：stateNo，类型：'hidden'}），
$（''）.attr（{name:`state[${stateNo}][name]`，value:'name'}），
$（''）.attr（{name:`state[${stateNo}][Team]`，值：'A'，键入：'radio'}）
)));
stateNo++；
});

---

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

有些代码可以更简洁地编写，或者更多地使用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++;
});

$（文档）。在（'click'，'input'，函数（）{
$（'label[name=“”+$（this.attr（'name'）+“]））
.removeClass（'nostate selected'）
.has（“：选中”）
.addClass（函数（）{
return$（this）.is（'.smallx'）？'nostate'：'selected'；
});
});
$（文档）。在（'click'，'button[name=btnbtn]'上，函数（）{
$（'tbody'）.append（$（''）.append（$（''）.append(
$（''）.attr（{name:`state[${stateNo}][PlayerID]`，值：stateNo，类型：'hidden'}），
$（''）.attr（{name:`state[$