我在jQuery中有多个if/if else来向我显示页面上的不同类，但它无法正常工作

I have multiple if/if else in jQuery to show me different classes on a page and its not working properly

提问人：DeeCodz 提问时间：12/13/2022 最后编辑：DeeCodz 更新时间：12/16/2022 访问量：98

问：

我有一个简单的 HTML 页面，其中包含不同的元素，由于之前选择了某些选项，这些元素被隐藏或显示。

我有不同的选项（单选按钮），必须先单击它们，它们应该控制和隐藏或显示元素：

  1. 家庭或非家庭（家庭 = 1，家庭 = 2）
  2. Household 或 Nohousehold 和 Monument（Monument = 1 或 2）
  3. 家庭和纪念碑
  4. 无户
  5. Nohousehold 和 Zones（区域 = 1 或 2）
  6. Nohousehold 和 Monument
  7. Nohousehold and Zones and Monument

我在上面的数字之后调用了 html 上的 div 类（例如：1 = class1,2 = class2,..依此类推），通过从上面的选项中进行选择，每个类都应该可见。这是我edit_outerwalls.jsp，包含在 edit.jsp 中。

<div class="class1"> //This should be displayed only if Household = 1 or 2
...
</div>

<div class="class2"> //This should be displayed only if Household = 1 or 2 and Monument = 1
...
</div>

<div class="class3"> //This should be displayed only if Household = 1 and Monument = 1
...
</div>

<div class="class4"> //This should be displayed only if Household = 2
...
</div>

<div class="class5"> //This should be displayed only if Household = 2 and Zones = 1
...
</div>

<div class="class6"> //This should be displayed only if Household = 2 and Monument = 1
...
</div>

<div class="class7"> //This should be displayed only if Household = 2 and Zones = 1 and Monument = 1
...
</div>

<div class="class2">
...
</div>

<div class="class5">
...
</div>

我的jQuery代码如下所示：

function checkClass1234() {
    let household = $('input:radio[name="household"]:checked').val(); //this are the radiobuttons on the html page
    let zones = $('input:radio[name="zones"]:checked').val();
    let monument = $('input:radio[name="monument"]:checked').val();

    if (household === '1' || household === '2') {
        $('.class1').show();
    } else if ((household === '1' || household === '2') && (monument === '1')) {
        $('.class2').show();
    } else {
        $('.class1').hide();
        clearValues('.class1');
        $('.class2').hide();
        clearValues('.class2');
    }

    if (household === '1' && monument === '1') {
        $('.class3').show();
        $('.class2').hide();
        clearValues('.class2');
    } else {
        $('.class3').hide();
        clearValues('.class3');
    }

    if (household === '2') {
        $('.class4').show();
        $('.class3').hide();
        clearValues('.class3');
    } else {
        $('.class4').hide();
        clearValues('.class4');
    }

    if (household === '2' && zones === '1' && monument === '1') {
        $('.class7').show();
        $('.class2').hide();
        clearValues('.class2');
        $('.class3').hide();
        clearValues('.class3');
    } else if (household === '2' && monument === '1') {
        $('.class6').show();
        $('.class2').hide();
        clearValues('.class2');
        $('.class3').hide();
        clearValues('.class3');
    } else if (household === '2' && zones === '1') {
        $('.class5').show();
        $('.class2').hide();
        clearValues('.class2');
        $('.class3').hide();
        clearValues('.class3');
    } else {
        $('.class4').hide();
        clearValues('.class4');
        $('.class5').hide();
        clearValues('.class5');
        $('.class6').hide();
        clearValues('.class6');
        $('.class7').hide();
        clearValues('.class7');
    }
}

我的编辑.jsp看起来像这样（在这里我包括我所有的页面）：

<%@page contentType="text/html" pageEncoding="UTF-8" %>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<fmt:setBundle basename="bundles.${orderName}-resources"/>
<c:set var="order" value="${order}" scope="request"/>

<head>
    <!-- All Scripts -->
</head>

<jsp:include page="/WEB-INF/jspf/crumb1to4/edit.jsp"/>

<section id="content">
    <header>
        <h1><fmt:message key="title"/></h1>
        <h3>
            <fmt:bundle basename="bundles.household-resources">
                <fmt:message key="title.comment"/>
            </fmt:bundle>
        </h3>
    </header>

    <jsp:include page="/WEB-INF/jspf/edit/mandatory.jsp"/>

    <spring:url var="attachmentsUrl" value="/${orderName}/attachments"/>
    <form:form method="post" modelAttribute="order" action="${attachmentsUrl}">
        <jsp:include page="/WEB-INF/jspf/edit/errors.jsp"/>

        <jsp:include page="edit_consultant.jsp"/>

        <jsp:include page="edit_household.jsp"/>
        
        <fieldset>
            <fmt:bundle basename="bundles.order-resources">
                <legend>
                    <jsp:include page="/WEB-INF/jspf/edit_elem/checkbox.jsp">
                        <jsp:param name="label" value="caption.buildingshell"/>
                        <jsp:param name="field" value="buildingshell"/>
                        <jsp:param name="bundle" value="order"/>
                        <jsp:param name="tooltip" value="buildingshell.info"/>
                    </jsp:include>
                </legend>

                <div id="blockBuildingshell">
                    <div class="haupttext">
                        <fmt:message key="buildingshell.comment"/>
                    </div>

                    <jsp:include page="edit_outerwalls.jsp"/> <!-- In here i have all the elements with class1, class2, class3... -->

                </div>
            </fmt:bundle>
        </fieldset>

        <jsp:include page="edit_machines.jsp"/>

        <!-- ...Another Included JSP Pages... -->

        <!-- include next button -->
        <jsp:include page="/WEB-INF/jspf/edit/next2.jsp">
            <jsp:param name="next">
                <jsp:attribute name="value">
                    <fmt:message key="next.comment"/>
                </jsp:attribute>
            </jsp:param>
        </jsp:include>
    </form:form>
</section>

我的家庭 .jsp 看起来像这样（这里是 3 个单选按钮）：

<%@ page pageEncoding="UTF-8" %>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>

<fmt:bundle basename="bundles.order-resources">

    <!-- Household -->
    <fieldset>
        <legend>
            <fmt:message key="caption.household"/>
        </legend>

        <div class="formclear"></div>

        <h3>
            <fmt:message key="caption.location"/>
        </h3>

        <div class="label">
            <form:label path="household.type">
                <fmt:message key="household.type"/>
            </form:label>
            <span class="formAsterics">*</span>
            <jsp:include page="/WEB-INF/jspf/edit/tooltip.jsp">
                <jsp:param name="tooltip" value="household.type.tooltip"/>
                <jsp:param name="bundle" value="order"/>
            </jsp:include>
        </div>
        <div class="field fieldRadio">
            <form:radiobutton path="household.type" value="1"/>
            <fmt:message key="household.type1"/>
            &nbsp;
            <form:radiobutton path="household.type" value="2"/>
            <fmt:message key="household.type2"/>
            <form:errors path="household.type" cssClass="error"/>
        </div>

        <div class="formclear"></div>

        <div class="blockNohousehold">
            <!-- household.zones -->
            <jsp:include page="/WEB-INF/jspf/edit_elem/radio_yes_no.jsp">
                <jsp:param name="label" value="household.zones"/>
                <jsp:param name="field" value="household.zones"/>
                <jsp:param name="bundle" value="order"/>
                <jsp:param name="mandatory" value="true"/>
            </jsp:include>
        </div>

        <div id="blockMonument">
            <!-- household.monument -->
            <div class="label">
                <form:label path="household.monument">
                    <span class="blockHousehold"><fmt:message key="household.monument1"/></span>
                    <span class="blockNohousehold"><fmt:message key="household.monument2"/></span>
                    <span class="formAsterics">*</span>
                </form:label>
            </div>
            <div class="field fieldRadio">
                <fmt:bundle basename="bundles.application-resources">
                    <form:radiobutton path="household.monument" cssClass="inputCheck" value="1"/>
                    <fmt:message key="yes"/>
                    <form:radiobutton path="household.monument" cssClass="inputCheck" value="0"/>
                    <fmt:message key="no"/>
                </fmt:bundle>
                <form:errors path="household.monument" cssClass="error"/>
            </div>

            <div class="formclear"></div>
        </div>
    </fieldset>
</fmt:bundle>

和上次一样，这是我的DTO对象家庭.java：

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
@XmlAccessorType(XmlAccessType.FIELD)
public class Household implements Serializable {
    @Range(min = 1, max = 2)
    private Integer type;
    @Range(min = 0, max = 1)
    private Integer zones;
    @Range(min = 0, max = 1)
    private Integer monument;
}

对不起我的英语，对不起，如果我的问题中缺少什么，请告诉我！ 谢谢！

我的问题是，当我第一次选择选项时，除了 class7 之外，它工作得很好。当我更改所选选项或仅切换一个选项时，什么也没发生。它看起来像是冻结的。我尝试了不同的方法来对 if 进行排序，但这是迄今为止最好的结果。我是jQuery的新手，我将不胜感激有人的帮助！:)

javascript html jquery if-语句

评论

1赞 Stultuske 12/13/2022
jQuery是javascript，它不是java。是的，这是有区别的。
0赞 Mister Jojo 12/13/2022
为什么不直接使用决策网格呢？你不必要地在大脑中打结......
0赞 DeeCodz 12/13/2022
@MisterJojo：RadioButton 选项包含在 JSP 页面中，类元素也包含在另一 （3） 个 jsp 文件中。我从未听说过jQuery中的决策网格。我认为总的来说，整个项目会有更多的变化，然后用 if 来做。
0赞 Mister Jojo 12/13/2022
决策网格是一个逻辑概念，不属于任何语言或库

答：

0赞 jayaraj 12/13/2022 #1

检查下面的示例代码以显示和隐藏元素。

<div class="class1" > Household 
...
</div>


<input type="checkbox" onclick="checkClass1234()" id="household" name="vehicle1" value="1" >
<label> Hide & Show Household</label><br>
<script>
function checkClass1234() {
var rate_value;
  if (document.getElementById('household').checked) {
  rate_value = document.getElementById('household').value;
  if(rate_value != "undefined"){
  document.getElementsByClassName('class1')[0].style.display = 'none';
  }
}else{
   document.getElementsByClassName('class1')[0].style.display = 'block';
  }
}
</script>

0赞 Carsten Massmann 12/13/2022 #2

这是使用最少代码完成此操作的一种方法。但它要求在额外属性中按元素完成可见性设置。此属性包含一个字符串，最多包含三个字符，每个字符对应 和 的单选按钮。在循环中逐个检查字符：如果 -th 单选按钮值必须为非零，如果不需要任何内容，如果是其他任何值，则 -th 单选按钮的值必须完全匹配。data-showhouseholdmonumentzones.every()v=="x"iv=="-"vi

const toggledivs = document.querySelectorAll("[data-show]");
const RBs = [ frm.household, frm.monument, frm.zones ];
toggledivs.forEach(d=>d.style.display="none");

document.body.onclick = ev => {
  if (ev.target.tagName == "INPUT")
    toggledivs.forEach(d=>d.style.display=d.dataset.show.split("").every((v,i)=>v=="-"||(v=="x"&&RBs[i].value>0)||v==RBs[i].value) ? "" : "none" )
}
<form name="frm">
  <fieldset><label><input type="radio" name="household" value="0" checked>0</label>
    <label><input type="radio" name="household" value="1">1</label><label><input type="radio" name="household" value="2">2</label> Household</fieldset>
  <fieldset><label><input type="radio" name="monument" value="0" checked>0</label>
    <label><input type="radio" name="monument" value="1">1</label> Monument</fieldset>
  <fieldset><label><input type="radio" name="zones" value="0" checked>0</label>
    <label><input type="radio" name="zones" value="1">1</label> Zones</fieldset>
</form>
<div class="class1" data-show="x">1 //This should be displayed only if Household = 1 or 2 ...
</div>

<div class="class2" data-show="x1">2 //This should be displayed only if Household = 1 or 2 and Monument = 1 ...
</div>

<div class="class3" data-show="11">3 //This should be displayed only if Household = 1 and Monument = 1 ...
</div>

<div class="class4" data-show="2">4 //This should be displayed only if Household = 2 ...
</div>

<div class="class5" data-show="2-1">5 //This should be displayed only if Household = 2 and Zones = 1 ...
</div>

<div class="class6" data-show="21">6 //This should be displayed only if Household = 2 and Monument = 1 ...
</div>

<div class="class7" data-show="211">7 //This should be displayed only if Household = 2 and Zones = 1 and Monument = 1 ...
</div>

<div class="class2" data-show="x1">
 2 again ...
</div>

<div class="class5" data-show="2-1">
 5 again ...
</div>

0赞 Mister Jojo 12/14/2022 #3

在这种逻辑错综复杂的代码中，需要使用逻辑工具来表示决策系统。

否则，你最终会得到一个意大利面条代码，你和所有必须管理这个代码的人都会沉没。

我的建议是：使用“会说话”的词，而不是，，会让每个人都失去逻辑线索的名字。XYZ

在这里，只有一个简单的决策网格需要维护，其逻辑以通用方式以来龙去脉的描述为模型。逻辑中的任何更改只需要修改此网格，您甚至可以添加新的类或新的单选按钮，添加到它们或更改它们的值。JS 可以保持不变。

从代码的角度来看，当然有必要费心去建立这个网格的解释器;对于任何计算机科学家来说，实现...

实际上，您的决策网格是这样的：

家庭 纪念碑 区
第1类 1,2 . .
第2类 1,2 1 .
第3类 1 1 .
第4类 2 . .
第5类 2 . 1,2
第6类 2 1 .
第7类 2 1 1

在 JS 对象中更改后，它确实：

const decisionGid = 
  { class1 : { household : [1,2]                              }
  , class2 : { household : [1,2], monument: [1]               }
  , class3 : { household : [1],   monument: [1]               }
  , class4 : { household : [  2],                             }
  , class5 : { household : [  2],                zones: [1,2] }
  , class6 : { household : [  2], monument: [1]               }
  , class7 : { household : [  2], monument: [1], zones: [1]   }
  }

一旦代码建立起来，更新决策网格比修改嵌套的 if 级联要容易得多

所以你的代码应该是：

const
  myForm  = document.querySelector('#my-form')
, decisionGid = 
  { class1 : { household : [1,2]                              }
  , class2 : { household : [1,2], monument: [1]               }
  , class3 : { household : [1],   monument: [1]               }
  , class4 : { household : [  2],                             }
  , class5 : { household : [  2],                zones: [1,2] }
  , class6 : { household : [  2], monument: [1]               }
  , class7 : { household : [  2], monument: [1], zones: [1]   }
  };

myForm.onsubmit = e => e.preventDefault(); // disable form submit for testing

f_update_show_hide();
myForm.addEventListener('input',f_update_show_hide);

function f_update_show_hide()
  {
  for ( let classVal in decisionGid )   
    {
    let test = true
    for (let elm in decisionGid[classVal])  
      {
      test &&= decisionGid[classVal][elm].includes( Number(myForm[elm].value) )
      }
    if (test)  $(`.${classVal}`).show();
    else       $(`.${classVal}`).hide();        
    }
  }

myForm.onclick = ({target: btn}) =>
  {
  if (!btn.matches('button[data-elm]'))  return;
  myForm[btn.dataset.elm].value = 0;
  f_update_show_hide();
  }

// set display info conditions (for demo control)
for (let classVal in decisionGid )
  {
  $(`.${classVal}`).text(`${classVal} -> ${JSON.stringify(decisionGid[classVal])}` );
  }
body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
label {
  display    : inline-block;
  width      : 2.6em;
  background : lightgreen;
  }
input[value="0"] {
  display : none;
  }
fieldset {
  display : inline-block;
  width   : fit-content;
  padding : .4em;
  }
fieldset label:last-of-type {
  background : orange;
  }
div {
  margin     : .4em;
  padding    : .1em .4em;
  background : lightblue;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <fieldset>
    <legend>household</legend>
    <label> <input type="radio" name="household" value="1">  1 </label>
    <label> <input type="radio" name="household" value="2">  2 </label>
    <input type="radio" name="household" value="0" selected>
    <button type="button" data-elm="household">none</button>
  </fieldset>
  <fieldset>
    <legend>monument</legend>
    <label> <input type="radio" name="monument" value="1">  1 </label>
    <label> <input type="radio" name="monument" value="2">  2 </label>
    <input type="radio" name="monument" value="0" selected>
    <button type="button" data-elm="monument">none</button>
  </fieldset>
  <fieldset>
    <legend>zones</legend>
    <label> <input type="radio" name="zones" value="1">  1 </label>
    <label> <input type="radio" name="zones" value="2">  2 </label>
    <input type="radio" name="zones" value="0" selected>
    <button type="button" data-elm="zones">none</button>
  </fieldset>
</form>  

<div class="class1"> class 1</div>
<div class="class2"> class 2</div>
<div class="class3"> class 3</div>
<div class="class4"> class 4</div>
<div class="class5"> class 5</div>
<div class="class6"> class 6</div>
<div class="class7"> class 7</div>

评论

0赞 DeeCodz 12/15/2022
感谢您的回答，我认为，这是为我的项目做到这一点的最佳方式！我的 RadioButtons 的路径是：Edit.jsp -> Edit_Household.jsp -> RadioButtons。编辑.jsp有一个 HTML 表单，在这个表单中包含更多的 JSP 文件。所以我的Edit_Household.jsp包含在 Edit.jsp 文件中。当我更改 myForm 变量以选择所有三个 RadioButton 时，它会起作用还是应该将所有三个 RadioButton 放在一个 div 中？
0赞 DeeCodz 12/15/2022
RadioButton 中的所有值也存储在 DTO 变量中。例如：Household 在 Household 类中.java它有一个 @Range（min = 1， max = 2） 私有整数类型;。在JSP中，我的RadioButton如下所示： 对于其他两个 RadioButton，它是相同的，只是 Household 对象的变量不同。<form:radiobutton path="household.type" value="1"/> <form:radiobutton path="household.type" value="2"/>
0赞 Mister Jojo 12/15/2022
@DeeCodz 你可以在JSP中做任何你想做的事情，但最终你会得到一个HTML5表单结构，只有JavaScript来管理它。翻译：使用代码检查器查看表单的 HTML5 结构，以决定如何在 JS 中处理它。
0赞 Mister Jojo 12/15/2022
@DeeCodz否则，在 HTML/JS 中，这对组合独立于 JS 代码的表示结构 => 工作，每个输入都被视为直接子项：（.properties...）[form, input]document.forms['form_name'][input_name]
0赞 Mister Jojo 12/15/2022
@DeeCodz根据我对 JSP 生成器工作方式的理解，它会生成一个不尊重表单逻辑的 HTML，这会使 JS 代码的编写变得复杂......

上一个：在 javascript 中，按钮的单击事件未在循环外运行

下一个：Python 脚本跳过 If 语句的第一部分，即使尚未满足条件