Javascript для начинающих: jQuery 'toggle' проблема - PullRequest
Новая
       5

Javascript для начинающих: jQuery 'toggle' проблема

1 голос
/ 09 февраля 2011

HI All,

Я настоящий новичок в JS, и поэтому я использовал несколько простых кусочков jQuery, чтобы помочь мне получить нужные эффекты. Все шло хорошо, пока я не попытался реализовать эффект переключения jQuery. Я хочу, чтобы код применялся к нескольким элементам, поэтому я стараюсь уменьшить его и сделать его универсальным, а не писать строку для каждой вкладки переключения.

Я просто не могу заставить его работать!

Голова с javascript: 

<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#content div[id^=toggle]').hide();
    $('[class^=info]').click(function() {
        var x = $(this).attr("idName");
        $('#toggle_' + x).toggle();
        return false;
        });
    });
</script>

</head>

Body: 

<div id="content">
    <div class="info_tab" id="info_grover">
        <img src="images/pgrover_120x137.jpg" alt="Philip Grover" />
        <h1>Philip Grover</h1><br />
        <p>Info about Philip Grover</p>
    </div>
    <div id="toggle_info_grover">
    </div>
    <div class="info_tab" id="info_lewis">
        <img src="images/rlewis_120x137.jpg" alt="Roy Lewis" />
        <h1>Roy Lewis</h1><br />
        <p>Info about Roy Lewis</p>
    </div>
    <div id="toggle_info_lewis">
    </div>
</div>

Я знаю, что ответ, вероятно, чрезвычайно прост, и я подозреваю, что это как-то связано с моим использованием ключевого слова "this", но после часа поиска я, похоже, не могу найти его для моего конкретного сценария. Буду очень признателен за любой совет.

Заранее спасибо,

Rich

Ответы [ 2 ]

3 голосов
/ 09 февраля 2011

Ваш код ищет атрибут с именем "idName", и все же ни один из ваших HTML-элементов не имеет этого атрибута.Я думаю, что вы хотите просто "id". 

    var x = $(this).attr("id");

или, проще говоря, 

    var x = this.id;
0 голосов
/ 09 февраля 2011

Кстати, это сложно. Если ваш «toggler» всегда является следующим элементом, вам лучше использовать класс, например «toggler» для элемента clickable (ничего другого, без идентификаторов, без ничего) и использовать: 

$('.toggler').click( function() {
$(this).prev().toggle();
});
...