jQuery根据选项更改div

时间：2018-11-11 11:12:16

标签： jquery option

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

Basic Idea是两个选项选择框，第一个选择工具包的类型（汽车，卡车或大型卡车），第二个显示零件数。

我已经按照需要的方式工作了，但是我不得不打破一项任务规则：我不得不重命名一个选项值，以删除其中不允许执行的空格。

这是我必须更改的选项：

<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，有人可以告诉我，为什么/如果选项值中的空格有所不同，并且如果我可以调整现有的js来说明那个很大的空格，那是在做我的头...

我尝试“假设”在选项值中添加一个&nbsp;而不是空格，并且代码仍然无法按预期工作，因此我不是100％是否是引起空格的空格。有问题...

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>

3 个答案:

答案 0 :(得分：0)

您的DIV ID为“ BigTruck12”，因此您的选择器需要匹配，为什么不只没有空格呢？

不建议/不允许在ID中使用空格，您的问题是这样做的一个很好的理由。

无论如何要获取元素：

  • 使用id属性：$('[id="'+idWithSpaces+'"]')
  • 转义空格：id = id.replace(/ /g,"\\ ");
  • 使用DOM document.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>

答案 1 :(得分：0)

您的选项BigTruck具有空格。

  • 不建议使用id加上空格

但是，如果您想解决此问题，而无需更改ID，则可以替换空格：

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

您的代码片段中的更改：

$(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>

答案 2 :(得分：-1)

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

相关问题
最新问题