Question

在PHP中，不同的if-elseif-scenario相互排斥，对吧？我有点困惑，我似乎不知道为什么这里的JavaScript不是这种情况。谁能告诉我如何简化这个？

（此语句连接到单选按钮，并且应该以不同的方式设置所选单选按钮的样式。但是，当我不包括所有remove - 部分时，单击一个然后再单击另一个部分会使我同时使用他们的风格为＆＃34;选择＆＃34;）

$("#item-upload-form input").on("change", function() {


var hello = $("input[name='category_select']:checked", "#item-upload-form").val();


if(hello == 1){
   $("#handy").addClass("selected");
   $("#pc").removeClass("selected");
   $("#notebook").removeClass("selected");

 } else if (hello == 2){
   $("#pc").addClass("selected");
   $("#handy").removeClass("selected");
   $("#notebook").removeClass("selected");

 } else if (hello == 3){
   $("#notebook").addClass("selected");
   $("#pc").removeClass("selected");
   $("#handy").removeClass("selected");
 }

});

Answer 1

我认为@ Katana314对您提出的问题有正确的答案。 Javascript不会在每次调用时刷新页面，因此该类将保留在该元素上，直到您将其删除。这样可能会更清洁......

$("#item-upload-form input").on("change", function() {


var hello = $("input[name='category_select']:checked", "#item-upload-form").val();

// find any element that has the selected class and remove it
$('.selected').removeClass('selected');

// then add it to which ever element needs it.
if(hello == 1){
   $("#handy").addClass("selected");
 } else if (hello == 2){
   $("#pc").addClass("selected");
 } else if (hello == 3){
   $("#notebook").addClass("selected");
 }

});

Answer 2

因为您使用了两个选择器并且使用该值检查hello仅适用于两个值都返回相同值的那些。如果两个选择器值都产生不同的值，那么您的条件永远不会匹配。

因此，只有两个值相同才会匹配。

Answer 3

让我们只保留对addClass（）的调用。代码如下所示：

if(hello == 1){
   $("#handy").addClass("selected");
 } else if (hello == 2){
   $("#pc").addClass("selected");
 } else if (hello == 3){
   $("#notebook").addClass("selected");
 }

单击单选按钮会发生什么？ R：每次只运行一个分支。连续点击只会将addClass添加到当前元素，并维护以前元素的类。

Answer 4

为什么不让jQuery为您完成所有工作 - 这样您就可以在不更新代码的情况下添加/删除选择：

$("#item-upload-form input").on("change", function (ele) {
    $("#item-upload-form input").each(function(  ) {
        if ($(this).prop('checked')){
            $(this).addClass("selected")
        } else{
            $(this).removeClass("selected") ;
        }
    });
});

Answer 5

要回答你的问题，是的，if-else-blocks将停止评估是否找到匹配。

建议1：尝试使用===代替==。 ===检查值和类型是否相同。

对于许多内容，

== 1都会传递为真，包括'1' == 1和true == 1。我不知道究竟是什么问题，但你可能会得到误报。

建议2：这是修改后的代码建议（而不是if-else块）

$("#handy").toggleClass("selected", (hello === 1));
$("#pc").toggleClass("selected", (hello === 2));
$("#notebook").toggleClass("selected", (hello === 3));

JavaScript if-elseif-statement

5 个答案: