2010-01-05 6 views
0

Я ищу способ, в котором я могу захватить элемент идентификатор из моей страницы, как это:захватить идентификатор элемента - JQuery

<div id="events"> 
    <div id="event_1765" class="type_automotive start_125x125 color_Black"> 
     <h3>Leftlane News</h3> 
    </div> 
</div> 

Я хотел бы получить идентификатор = «события», но мне это нужно в этом сценарии, где событие является:

$("input.type_check").click(function() { 
     if($(this).is(':checked')) { 
      $("#events div."+$(this).attr('id')).removeClass('type_hidden'); 
      $("#events div").not(".type_hidden, .start_hidden, .color_hidden").css("display","block"); 
     } else { 
      $("#events div."+$(this).attr('id')).addClass('type_hidden'); 
      $("#events div."+$(this).attr('id')).css("display","none"); 
     } 
    }); 

так, другими словами, я хотел бы заменить «событие» в сценарии Jquery с кодом, который динамически получает элемент ID на странице HTML.

+0

Вы можете разместить HTML-разметку, включая элемент с классом 'type_check? – rahul

+0

Весь код можно посмотреть здесь http://jsbin.com/exisi – Spyderfusion02

ответ

1

Во-первых, не используйте css(), чтобы скрыть их, когда вы также ставите класс. Вы можете так же легко сделать это в своем CSS:

div.type_hidden { display: none; } 

или просто не использовать это вообще.

$("input.type_check").click(function() { 
    $("div." + this.id).toggle($(this).is(":checked")); 
}); 

Это:

  • получает атрибут ID в флажком, который щелкнул (например, "type_automotive");
  • использует это в селекторе классов, чтобы скрыть/показать divs с этим классом; и
  • проверяет состояние флажка, чтобы увидеть, нужно ли его скрывать или показывать.

Нет необходимости в классе «type_hidden» или css("display", "none") (что вы не должны делать, чтобы использовать эффекты jQuery в любом случае).

Примечание: все это предполагает (с вашего сайта):

<input name="type[]" type="checkbox" id="type_automotive" 
    value="automotive" class="type_check" checked="checked" /> 

и

<div id="events"> 
    <div id="event_1768" class="type_automotive start_300x250 color_Black"> 
    <h3>Autoblog</h3> 
    </div> 
</div> 
+0

Спасибо, что работает намного лучше, чем у меня. – Spyderfusion02

0

Ну, вам понадобится «селектор» для этого div в этом случае. Как вы можете найти его? Это всегда первый div в какой-то другой «уникальной» вещи? Есть ли у него специальный класс? Вам нужен уникальный способ его поиска.

0

Я не уверен, что я понимаю вопрос, но я думаю, что вы хотите скрыть соответствующие div, когда вход проверен. Кроме того, глядя на ваш html, должен быть только один уникальный идентификатор на странице. Вы должны изменить id = "events" на class = "events". После того, как вы сделаете это, то я думаю, что Javascript вы просите за это:

$("input.type_check").click(function() { 
    if($(this).is(':checked')) { 
     $surroundingDiv = $("div." + $(this).attr('id')).parent().removeClass('type_hidden'); 
     $('div.events').not(".type_hidden, .start_hidden, .color_hidden").css("display","block"); 
    } else { 
     $("div."+$(this).attr('id')).parent().addClass('type_hidden'); 
     $("div."+$(this).attr('id')).parent().css("display","none"); 
    } 
}); 

Кроме того, вместо установки «type_hidden» класса, то скрытие/показ его с JavaScript, я хотел бы сделать это только один раз в CSS.

Смежные вопросы