如果条件和切换类方法在我的jquery中有问题

时间:2016-11-09 11:31:54

标签: jquery

我正在门口创造自行车,洗车服务。为此,我要求客户在他们要求我洗车或骑自行车时注册他们的服务时告诉我。他们选择汽车然后还有我想问的问题。同样适合自行车。我想隐藏用户没有选择的汽车/自行车选择元素。

到目前为止,我在汽车/自行车选择的点击事件中使用了jquery切换功能。如果用户点击了汽车,我会显示'完全清洗'或者'沐浴露,如果用户点击两个轮车,我会显示完全清洗'选项。

这是我在服务器中的html表单。这是一个链接,可以看到我的粗略示例:http://vkacademy.in/crystal/

我需要帮助的是从汽车/自行车选择隐藏自己的未选择选项。因此,用户点击' car'和“两轮车”是隐藏的,或相反的。

我还在学习,所以我会很高兴得到任何帮助,并希望看到一个有效的JSFiddle或类似的。

我来自:

<form name="f1" action=""  method="post" enctype=""/>
    <table width="417" border="0">
        <tr>
            <td width="111">Name</td>
            <td width="48">&nbsp;</td>
            <td></td>
            <td width="244"><input type="text" name="name"  id="name" value=""/></td>
        </tr>
        <tr>
            <td>Service Rendered</td>
            <td>
                <input type="radio" value="car" name="car" id="car"/>Car</span> <br/>
            <p id="car-show" style="display:none"><input type="radio" name="fullwash" value="fullwash" />fullwash <input type="radio" name="bodywash" value="bodywash" />Bodywash</p>
            </td>

            <td><input type="radio" value="twowheeler" name="twowheeler" id="twowheeler"/>Two wheeler <br/><p id="twowheeler-show" style="display:none;"><input type="radio" name="fullwash" value="fullwash" />fullwash</p></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3" style="padding-left:180px;"><input type="submit" name="submit" value="submit" id="submit" /></td>
        </tr>
    </table>
</form>

我的jquery代码:

<script type="text/javascript">
    $(document).ready(function(){
        $('#submit').click(function(){
            a = $('#name');
            if (a.val() == '') {
                alert('Enter the user name');
            }
        });
        $('#car').click(function(){
            $('#car-show').toggle("slide");
        });

        $('#twowheeler').click(function(){
            $('#twowheeler-show').toggle("slide");
        });
    });
</script>

1 个答案:

答案 0 :(得分:0)

尝试使用hide:

&#13;
&#13;
  $('#car').click(function() {
    $('#twowheeler-show').hide();
    $('#car-show').toggle("slide");
  });

  $('#twowheeler').click(function() {
    $('#car-show').hide();
    $('#twowheeler-show').toggle("slide");
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="f1" action="" method="post" enctype="" />
<table width="417" border="0">
  <tr>
    <td width="111">Name</td>
    <td width="48">&nbsp;</td>
    <td></td>
    <td width="244">
      <input type="text" name="name" id="name" value="" />
    </td>
  </tr>
  <tr>
    <td>Service Rendered</td>
    <td>
      <input type="radio" value="car" name="service" id="car" />Car</span>
      <br/>
      <p id="car-show" style="display:none">
        <input type="radio" name="fullwash" value="fullwash" />fullwash
        <input type="radio" name="bodywash" value="bodywash" />Bodywash</p>
    </td>

    <td>
      <input type="radio" value="twowheeler" name="service" id="twowheeler" />Two wheeler
      <br/>
      <p id="twowheeler-show" style="display:none;">
        <input type="radio" name="fullwash" value="fullwash" />fullwash</p>
    </td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3" style="padding-left:180px;">
      <input type="submit" name="submit" value="submit" id="submit" />
    </td>
  </tr>
</table>
</form>
&#13;
&#13;
&#13;