Jquery 根据选项更改 div

Question

我正在为一家虚构的玩具店构建一个基本模块。

基本思路是两个选项 select 个框，第一个选择套件类型（汽车、卡车或大卡车），第二个显示零件数量。

我已经让代码按照它需要的方式工作，但我不得不打破任务的一个规则：我不得不重命名其中一个选项值以删除我所在的 space不允许做...

这是我必须更改的选项：

<option value="BigTruck">Big Truck</option>  <--- works if i take the space out

<option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended

我在我的代码中附加了一个 jsfiddle，有人可以告诉我，why/if 选项值中的 space 会有所不同，如果我可以调整我现有的 js 来解决这个问题space 那太好了，它让我头疼...

我已经尝试 "hypothetically" 在选项值中添加   而不是 space，代码仍然无法正常工作，所以我不是 100 % 是否是 space 导致了问题...

http://jsfiddle.net/baddog04061980/wtm1dLs2

$(document).ready(function() {
  $('.choice-boxs').hide();
  $('#Car12').show();
  $("#option-kit, #option-parts").on("change", function() {
    $('.choice-boxs').hide();
    $('#' + $('#option-kit').val() + $('#option-parts').val()).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">

  <div class="selector-wrapper cf">
    <label for="option-kit">
                  Kit
                </label>
    <select id="option-kit">

      <option value="Car" selected="">Car</option>
      <option value="Truck">Truck</option>
      <option value="Big Truck">Big Truck</option>

    </select>
  </div>

  <div class="selector-wrapper cf">
    <label for="option-parts">
                  Parts
                </label>
    <select id="option-parts">

      <option value="12" selected="">
        12
      </option>

      <option value="18">
        18
      </option>

      <option value="24">
        24
      </option>

      <option value="30">
        30
      </option>

      <option value="36">
        36
      </option>

    </select>
  </div>



</div>


<!-- Basic  -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


<!-- Deluxe -->

<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

<!-- Deluxe -->

<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>

Answer 1

你的 DIV ID 是 "BigTruck12" 所以你的选择器需要匹配所以为什么不直接没有空格呢？

ID 中不能有空格 recommended/allowed，你的问题是一个很好的理由。

无论如何获取元素的方法：

使用id属性：$('[id="'+idWithSpaces+'"]')
转义空格：id = id.replace(/ /g,"\ ");
使用DOMdocument.getElementById(id);

$(document).ready(function() {
  $('.choice-boxs').hide();
  $('#Car12').show();
  $("#option-kit, #option-parts").on("change", function() {
    $('.choice-boxs').hide();
    var id = $('#option-kit').val() + $('#option-parts').val();
    id = id.replace(/ /g,"\ ");
    $('#'+id).show();
    // $('[id="' + id + '"]').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
  <div class="selector-wrapper cf">
    <label for="option-kit">Kit</label>
    <select id="option-kit">
      <option value="Car" selected="">Car</option>
      <option value="Truck">Truck</option>
      <option value="Big Truck">Big Truck</option>
    </select>
  </div>

  <div class="selector-wrapper cf">
    <label for="option-parts">Parts</label>
    <select id="option-parts">
      <option value="12" selected="">12</option>
      <option value="18">18</option>
      <option value="24">24</option>
      <option value="30">30</option>
      <option value="36">36</option>
    </select>
  </div>
</div>

<!-- Basic  -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


<!-- Deluxe -->

<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

<!-- Deluxe -->

<div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>

Answer 2

id 属性不能包含空格。参见 What are valid values for the id attribute in HTML?。因此，我建议您在 div 上设置 id 时，在选项和下方都使用 BigTrucknnn。

Answer 3

您的选项 BigTruck 有空格。

不建议使用带空格的 id

但是如果你想解决这个问题，不改变id，你可以替换空格：

$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();

实例http://jsfiddle.net/c2f3uq17/1/

您的代码片段发生了变化：

$(document).ready(function() {
  $('.choice-boxs').hide();
  $('#Car12').show();
  $("#option-kit, #option-parts").on("change", function() {
    $('.choice-boxs').hide();
    $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="option-selectors">
  <div class="selector-wrapper cf">
    <label for="option-kit"> Kit</label>
    <select id="option-kit">
      <option value="Car" selected="">Car</option>
      <option value="Truck">Truck</option>
      <option value="Big Truck">Big Truck</option>
    </select>
  </div>
  <div class="selector-wrapper cf">
    <label for="option-parts">Parts</label>
    <select id="option-parts">
      <option value="12" selected="">12</option>
      <option value="18">18</option>
      <option value="24">24</option>
      <option value="30">30</option>
      <option value="36">36</option>
    </select>
  </div>
</div>

<!-- Basic  -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>

<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>

Jquery 根据选项更改 div

Jquery change div depending on options

jquery

option