JQuery скрыть шоу или переключение именования Div Doop необходимо решение - PullRequest
Новая
       23

JQuery скрыть шоу или переключение именования Div Doop необходимо решение

0 голосов
/ 26 января 2012

У меня есть простой сценарий скрытия шоу JQuery, который я взял с примера сайта.Я пытаюсь пройти через использование $ (это).чтобы нацелить div я хочу скрыть / показать.Я был в состоянии сделать эту работу для первой группы, что-нибудь после первой неудачи.Я возился с кодом, поэтому у меня есть несколько примеров сбоев ниже, чтобы помочь понять, что именно я пытаюсь сделать.Вот код. 

<script type="text/javascript">
//$(document).ready(function(){
//  $("#hide").click(function(){
//    $(this).('#hideShowParent > #hideShow').hide();
//  });
//  $("#show").click(function(){
//    $(this).('#hideShowParent > #hideShow').show();
//  });
//});
$(document).ready(function(){
$("#hide").click(function(){
    $(this).find().parent("#hideShowParent").sibling("#hideShow").hide();
});
$("#show").click(function(){
    $(this).find().parent("#hideShowParent").sibling("#hideShow").hide();
}); 
});
</script>

Теперь я зацикливаюсь на чем-то, что может иметь один или два или более.Я хотел бы, чтобы мой jQuery нацелился на родителя нажатой кнопки, нашел ближайшего соседа div с именем hideShow в непосредственной близости и спрятал или показал (можно также использовать переключатель).помогите. Надеюсь, все это имеет смысл.

1 Ответ

1 голос
/ 26 января 2012

Во-первых, вы должны использовать атрибут id таким образом - идентификаторы должны быть уникальными.Поэтому я бы заменил их атрибутом class, который может быть одинаковым для нескольких элементов DOM: 

<div class="hideShowParent">
<ul>
<li>
    <button class="show">Show</button> 
    - <button class="hide">Hide</button> 
    <b>Medium</b>
        <div class="hideShow">

                <table>
                    <tr>
                        <td><hr /></td>
                    </tr>            
                    <tr><td height="15px">somethingn textual</td></tr>
                    <tr>
                        <td><hr /></td>
                    </tr>
                </table> 

        </div>
</li>
</ul>
</div>
<div class="hideShowParent">
<ul>
<li>
    <button class="show">Show</button> 
    - <button class="hide">Hide</button> 
    <b>Medium</b>
        <div class="hideShow">

                <table>
                    <tr>
                        <td><hr /></td>
                    </tr>            
                    <tr><td height="15px">somethingn textual</td></tr>
                    <tr>
                        <td><hr /></td>
                    </tr>
                </table> 

        </div>
</li>
</ul>
</div>

Тогда будет работать следующий код: 

$(document).ready(function() {
    $(".hide").click(function() {
        $(this).siblings(".hideShow").hide();
    });
    $(".show").click(function() {
        $(this).siblings(".hideShow").show();
    });
});

Рабочий пример: http://jsfiddle.net/MztAm/

...