Javascript 条件 hide/show 问题

Question

我需要一些 javascript 逻辑方面的帮助。我有这个代码 hides/shows。如果满足任何条件，我需要它才能工作。它目前正在为前两个条件工作。我是 javascript 的新手，所以不确定我是否正确编写了条件。

javascript:

$("input[name=JECT]").click(function() {
        if ((this.value == "no" || this.value == "JECTindividual_electronic") || document.getElementById("JECTRenewal")== "yes")
           $('#JECTvolumeshow').slideUp();
         else $('#JECTvolumeshow').slideDown();
    });

这里是 html：

<h2>Subscription Options</h2>
<h3>Please choose the options you desire.</h3>

    <div id="JECTshow" style="display:none">
    <p style="text-indent:30px;">Length of subscription:</br>
            <label><input type="radio" name="JECTsub" value="1" checked <?php if(@$JECTsub=="1"){ echo "checked";}?>> 1 year</label></br>
            <label><input type="radio" name="JECTsub" value="2" <?php if(@$JECTsub=="2"){ echo "checked";}?>> 2 years</label></br>
            <label><input type="radio" name="JECTsub" value="3" <?php if(@$JECTsub=="3"){ echo "checked";}?>> 3 years</label></br>
            <label><input type='checkbox' name='JECTrenewal' value='yes' <?php if(@$JECTrenewal=="yes"){ echo "checked";}?>> Check box if this is a renewal</label></p></br>
            <div id="JECTvolumeshow" style="display:none">
            <p style="text-indent:30px;">I would like my subscription to start with:</br></p>
            <label><input type="radio" name="JECTvolume" value="current" checked<?php if(@$JECTvolume=="current"){ echo "checked";}?>><?php echo "Volume ".$JECTsubscribeVolume['vol'].", Year ".$JECTsubscribeVolume['year']?></label></br>
            <label><input type="radio" name="JECTvolume" value="next"<?php if(@$JECTvolume=="next"){ echo "checked";}?>><?php echo "Volume ".++$JECTsubscribeVolume['vol'].", Year ".++$JECTsubscribeVolume['year']?></label></p>
           </div>
    </div>

Answer 1

document.getElementById("JECTRenewal") returns 一个 DOM 节点，而不是任何单个属性元素。因此，您不会直接将它与 "yes" 进行比较。要查看复选框是否被选中，将 JECTrenewal 设置为元素的 id 并查找 checked 属性：

if ((this.value == "no" || this.value == "JECTindividual_electronic") 
    || document.getElementById("JECTrenewal").checked)
 ...

或者，使用 jQuery:

if ((this.value == "no" || this.value == "JECTindividual_electronic") 
    || $("input[name=JECTrenewal]").is(":checked"))
 ...

Answer 2

当不在 DOM 中的 id 用作参数时，

document.getElementById 将 return 为 null。那么下面的代码是你想要的吗？

$("input[name=JECT]").click(function() {
        if (this.value == "no" || this.value == "JECTindividual_electronic" || document.getElementById("JECTRenewal") !== null)
           $('#JECTvolumeshow').slideUp();
         else $('#JECTvolumeshow').slideDown();
    });

如果您想比较该元素的文本内容，使用 jquery 可能是最简单的方法，例如：

$("input[name=JECT]").click(function() {
        if (this.value == "no" || this.value == "JECTindividual_electronic") || $("#JECTRenewal").text() == "yes")
           $('#JECTvolumeshow').slideUp();
         else $('#JECTvolumeshow').slideDown();
    });

Answer 3

使用 jquery 时，您必须 select "this" jquery 时尚 例如。 $(这个) ;您还必须使用 .val() 而不是 value .

例子。

  $("input[name=JECT]").click(function() {

            if ( $(this).val() == "no" || $(this).val() == "JECTindividual_electronic" || $("#JECTRenewal").text() == "yes"){

               $('#JECTvolumeshow').slideUp();

            } else {

               $('#JECTvolumeshow').slideDown();

            }


        });

仅供参考，我还纠正了这段代码中的其他一些小问题...

希望这对您有所帮助。

Javascript 条件 hide/show 问题

Javascript conditional hide/show issue

javascript

conditional

if-statement