Question

我在小提琴上找到了这个不错的演示： http://jsfiddle.net/TLBvx/1/

它在我的电脑上不起作用，我的代码下面是我缺少的东西吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$('select.div-toggler').change(function(){
    var target = $(this).data('target');
    $(target).children().addClass('hide');
    var show = $("option:selected", this).data('show');
    $(show).removeClass('hide');
});
</script>
<style>
.hide {
    display:none;
}
</style>
</head>

<body>
<select class="div-toggler" data-target=".my-info-1">
    <option value="">Select a fruit...</option>
    <option value="orange" data-show=".citrus">Orange</option>
    <option value="lemon" data-show=".citrus">Lemon</option>
    <option value="apple" data-show=".pome">Apple</option>
    <option value="pear" data-show=".pome">Pear</option>
</select>

<div class="my-info-1">
    <div class="citrus hide">Citrus is a common term and genus (Citrus) of flowering plants in the rue family, Rutaceae.</div>
    <div class="pome hide">In botany, a pome (after the Latin word for fruit: pōmum) is a type of fruit produced by flowering plants in the subtribe Malinae of the family Rosaceae.</div>
</div>
</body>
</html>

为什么它不起作用？

Answer 1

只有在将文档（HTML）加载到内存后，才必须执行jQuery。如果没有将它包装在$(document).ready(function(){});中，它会在浏览器有机会看到HTML之前执行。

$(document).ready(function(){
    $('select.div-toggler').change(function(){
        var target = $(this).data('target');
        $(target).children().addClass('hide');
        var show = $("option:selected", this).data('show');
        $(show).removeClass('hide');
    });
});

Answer 2

$(document).on('ready', function() {
  $('select.div-toggler').on('change',function() {
    var target = $(this).data('target');
    var show = $("option:selected", this).data('show');
    $(target).children().addClass('hide');
    $(show).removeClass('hide');
  });
});

.hide {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="div-toggler" data-target=".my-info-1">
    <option value="">Select a fruit...</option>
    <option value="orange" data-show=".citrus">Orange</option>
    <option value="lemon" data-show=".citrus">Lemon</option>
    <option value="apple" data-show=".pome">Apple</option>
    <option value="pear" data-show=".pome">Pear</option>
</select>

<div class="my-info-1">
    <div class="citrus hide">Citrus is a common term and genus (Citrus) of flowering plants in the rue family, Rutaceae.</div>
    <div class="pome hide">In botany, a pome (after the Latin word for fruit: pōmum) is a type of fruit produced by flowering plants in the subtribe Malinae of the family Rosaceae.</div>
</div>

Jquery选择选择器 - Jsfiddle示例

2 个答案: