Question

我想更改div内容，其中div使用相同的名称，代码工作正常，但它只是改变第一个div的内容我该怎么办？代码如下。

<select id="select" name="cd-dropdown" class="cd-select">
<option value="-1" selected>Currency</option>
<option value="1">Dollar $</option>
<option value="2">Pound £</option>
<option value="3">Rupees </option>
<option value="4">Dirham </option>
</select>



 <script>
$(document).ready(function () {
$('.pr-price').hide();
$('#2').show();
$('#select').change(function () {
    $('.pr-price').hide();
    $('#'+$(this).val()).show();
}); });

<div id="1" class="pr-price">$100</div>
<div id="2" class="pr-price">£200</div>
<div id="3" class="pr-price">Rs300</div>
<div id="4" class="pr-price">D400</div>

Answer 1

要使用多个div，请使用类

Live Demo

$(function () {
  $('.pr-price').hide();
  $('.d2').show();
  $('#select').on("change",function () {
    $('.pr-price').hide();
    $('.d'+$(this).val()).show();
  }).val(2); // reflect the div shown 
});

使用

<div class="pr-price d1">$100</div>
<div class="pr-price d2">£200</div>
<div class="pr-price d3">Rs300</div>
<div class="pr-price d4">D400</div>
<hr/>
<div class="pr-price d1">$500</div>
<div class="pr-price d2">£600</div>
<div class="pr-price d3">Rs700</div>
<div class="pr-price d4">D800</div>

如果您使用ID，则应将ID更改为不是数字 - 数字ID可用于某些（符合HTML5）但不适用于所有浏览器

Live Demo

$(function () {
  $('.pr-price').hide();
  $('#d2').show();
  $('#select').on("change",function () {
    $('.pr-price').hide();
    $('#d'+$(this).val()).show();
  }).val(2); // reflect the div shown 
});

使用

<div id="d1" class="pr-price">$100</div>
<div id="d2" class="pr-price">£200</div>
<div id="d3" class="pr-price">Rs300</div>
<div id="d4" class="pr-price">D400</div>

Answer 2

你所做的是正确的。除了仅指定id中的数值。 ID不能是数字。将ID更改为

<div id="price1" class="pr-price">$100</div>
<div id="price2" class="pr-price">£200</div>
<div id="price3" class="pr-price">Rs300</div>
<div id="price4" class="pr-price">D400</div>

也改变了

$('#select').change(function () {
    $('.pr-price').hide();
    $('#price'+$(this).val()).show();
});

这应该有所帮助。

Answer 3

这是因为您使用ID，如果您想在多个地方投放，请使用Class

<强> Working Demo

<强>代码

$(function () {
  $('.pr-price').hide();
  $('.d2').show();

  $('#select').on("change",function () {
    $('.pr-price').hide();
    $('.d'+$(this).val()).show();
  }).val("2");
});

<强> HTML

<div class="pr-price d1">$100</div>
<div class="pr-price d2">£200</div>
<div class="pr-price d3">Rs300</div>
<div class="pr-price d4">D400</div>

从下拉列表中选择选项中的所有div内容

3 个答案: