Селектор выбора Jquery - пример Jsfiddle

Я нашел это хорошее демо на скрипке: 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>

Почему это не работает?

Источник

2 ответа

Вы должны выполнить jQuery только после того, как документ (HTML) был загружен в память. Не оборачивая это в $(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');
    });
});
Источник 

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

Источник
Другие вопросы по тегам