Question

TL; DR

当前输出： - Divs＆＃39;隐藏/显示状态仅在单击复选框时发生更改

期望的输出： - Divs＆＃39;隐藏/显示状态对复选框和下拉列表都很敏感。

这是一个正常运作的jsfiddle。

详细信息：

我试图只显示页面的一部分取决于两个输入。使用第一个输入，用户必须选择多个房间。第二，用户必须决定他或她是否出租整个房产。

如果用户选择超过1个房间并决定出租整个房产，我想显示该房间的数量。但是，如果他或她有多个房间并且没有出租整个房产，或者他或她只有一个房间或工作室并且出租整个房产，我想只显示一个房间来输入详细信息。< / p>

但是，我当前的代码只会在点击按钮时显示房间，说明用户正在租用整个房产。如果房间数量发生变化，这种情况不会改变。

我试图用＆＃34;改变＆＃34;在下拉列表中，但似乎无法正常工作。我也尝试改变顺序，似乎只有一个会触发div的隐藏/显示属性。

我知道如何制作这些div＆＃39;只要用户选中该框或在下拉列表中更改其选择，就隐藏/显示状态更改？

代码：

Jquery的：

$("#Bedroom_2").hide();
$("#Bedroom_3").hide();
$("#Bedroom_4").hide();
$("#Bedroom_5").hide();
$("#Renting_Entire_Property").change(function() {
    if(this.checked) {
          if ($('#Number_of_Bedrooms').val() == 0 ) {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === 'Studio') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '1_Room') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '2_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '3_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '4_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '5_Rooms' || '5+_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").show();
          } else {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          }
    } else {
      $("#Bedroom_2").hide();
      $("#Bedroom_3").hide();
      $("#Bedroom_4").hide();
      $("#Bedroom_5").hide();
    }
});

<h3>HTML</h3>

    <label for="Number_of_Bedrooms">Bedrooms</label>
    <select id="Number_of_Bedrooms" name="Number_of_Bedrooms">
      <option></option>
      <option value="Studio">Studio</option>
      <option value="1_Room">1</option>
      <option value="2_Rooms">2</option>
      <option value="3_Rooms">3</option>
      <option value="4_Rooms">4</option>
      <option value="5_Rooms">5</option>
      <option value="5+_Rooms">5+</option>
    </select>
    <br>
    <label class="custom-control custom-checkbox">
      <input type="checkbox" id="Renting_Entire_Property">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check if in this listing you are renting the entire property</span>
    </label>
    <div id="Bedroom_1">Test 1
    </div>
    <div id="Bedroom_2">Test 2
    </div>
    <div id="Bedroom_3">Test 3
    </div>
    <div id="Bedroom_4">Test 4
    </div>
    <div id="Bedroom_5">Test 5
    </div>

这是一个正常运作的jsfiddle。

谢谢！

感谢@ Andreas，@ bassxzero和@Jairo Cordero的帮助！我发现每个解决方案都有效，而且你们的速度非常快！再次感谢！ :)

Answer 1

将您的事件处理程序添加到select和复选框，然后将代码中的select作为目标。

https://jsfiddle.net/8gvLvwg2/

$("#Bedroom_2").hide();
$("#Bedroom_3").hide();
$("#Bedroom_4").hide();
$("#Bedroom_5").hide();
$(document).on('change','#Renting_Entire_Property,#Number_of_Bedrooms',function() {
      var $checkbox = $("#Renting_Entire_Property");
    if($checkbox.prop('checked')) {
          if ($('#Number_of_Bedrooms').val() == 0 ) {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === 'Studio') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '1_Room') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '2_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '3_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '4_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '5_Rooms' || '5+_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").show();
          } else {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          }
    } else {
      $("#Bedroom_2").hide();
      $("#Bedroom_3").hide();
      $("#Bedroom_4").hide();
      $("#Bedroom_5").hide();
    }
});

Answer 2

将此添加到您的代码中

val x = Seq((100L,null), (102L,"17179869185L"), (101L,"17179869186L"), (200L,"17179869186L"), (401L,"1L"), (500L,"1L"), (600L,"8589934593L"), (700L,"8589934593L"), (800L,"8589934593L"), (900L,"8589934594L"), (1000L,"8589934594L"), (1200L,"2L"), (1300L,"2L"), (1301L,"2L"), (1400L,"17179869187L"), (1500L,"17179869188L"), (1600L,"8589934595L")).toDF("u","x1")

x.show()


+----+------------+
|   u|          x1|
+----+------------+
| 100|        null|
| 102|17179869185L|
| 101|17179869186L|
| 200|17179869186L|
| 401|          1L|
| 500|          1L|
| 600| 8589934593L|
| 700| 8589934593L|
| 800| 8589934593L|
| 900| 8589934594L|
|1000| 8589934594L|
|1200|          2L|
|1300|          2L|
|1301|          2L|
|1400|17179869187L|
|1500|17179869188L|
|1600| 8589934595L|
+----+------------+

val y = Seq(("17179869187L",-8589934595L), ("17179869188L",-8589934595L), ("17179869185L",-858993
4593L)).toDF("x2","y")


y.show()

+------------+-----------+
|          x2|          y|
+------------+-----------+
|17179869187L|-8589934595|
|17179869188L|-8589934595|
|17179869185L|-8589934593|
+------------+-----------+


x.join(y,'x1 === 'x2, "left_outer").show()

+----+------------+------------+-----------+
|   u|          x1|          x2|          y|
+----+------------+------------+-----------+
| 100|        null|        null|       null|
| 102|17179869185L|17179869185L|-8589934593|
| 101|17179869186L|        null|       null|
| 200|17179869186L|        null|       null|
| 401|          1L|        null|       null|
| 500|          1L|        null|       null|
| 600| 8589934593L|        null|       null|
| 700| 8589934593L|        null|       null|
| 800| 8589934593L|        null|       null|
| 900| 8589934594L|        null|       null|
|1000| 8589934594L|        null|       null|
|1200|          2L|        null|       null|
|1300|          2L|        null|       null|
|1301|          2L|        null|       null|
|1400|17179869187L|17179869187L|-8589934595|
|1500|17179869188L|17179869188L|-8589934595|
|1600| 8589934595L|        null|       null|
+----+------------+------------+-----------+

x: org.apache.spark.sql.DataFrame = [u: bigint, x1: string]
y: org.apache.spark.sql.DataFrame = [x2: string, y: bigint]
Command took 1.00 second

https://jsfiddle.net/7moon6f3/1/

jQuery - onChange（）中的onChange（）不起作用

TL; DR

详细信息：

Jquery的：

谢谢！

2 个答案: