jQuery - ссылается на другой класс того же объекта

Question

jQuery - ссылается на другой класс того же объекта

0

Вот моя ситуация:

У меня есть сайт, который будет охватывать 4 разных темы. Я начинаю с 4 divs, каждый из которых имеет название этих предметов. Например,

<div><p> Physics   </p></div>
<div><p> Chemistry </p></div>
<div><p> Biology   </p></div>
<div><p> Math      </p></div>

Когда я нажимаю на "физический" div, я бы хотел, чтобы появился еще один div, который подробно описывает какую-то физическую проблему или что-то в этом роде. Еще один щелчок приводит к исчезновению "деления разработки". У меня есть работа с одним "субъектом" здесь:

http://jsfiddle.net/yfrNn/2/

Это код jQuery, который я использую для выполнения этого.

$(document).ready(function () {
    $(".phys").click(function () {
        if ($(".phys:last").css("visibility") == "visible") {
            $(".phys").css("visibility", "");
        } else {
            $(".phys").css("visibility", "visible");
        }
    });
});'

Я мог бы написать эту функцию 4 раза, раз для каждого из предметов, которые я использую, но хотел бы сделать более чистое решение. Мне интересно, могу ли я объявить все divs следующим образом:

<div class="subject phys"><p> Physics   </p></div>
<div class="subject chem"><p> Chemistry </p></div>
<div class="subject bio"><p>  Biology   </p></div>
<div class="subject math"><p> Math      </p></div>

И затем выполняйте определенную функцию click() всякий раз, когда нажимается "субъект", распознает код, на который указывает этот конкретный div, и отображает соответствующий "div div".

Я считаю, что могу сделать это с помощью подкласса:

/* CSS */
div.subject{}
.subject.phys{}
.subject.chem{}
.subject.bio{}
.subject.math{}

Есть предположения? Есть ли лучший способ реализовать что-то подобное?

редактировать

Здесь обновленная скрипка с HTML примерно так же, как и в реализации:

http://jsfiddle.net/yfrNn/6/

Ryan Tuck 21 окт. 2013, в 22:59

Источник

0

Вы можете, но было бы лучше вместо этого использовать атрибут данных, по моему мнению, для хранения целевого дополнительного элемента содержимого, а не класса, таким образом, вам не нужно анализировать classNames элемента title или иметь if elseif другое заявление Или, что еще лучше, используйте тег привязки, так как это действительно событие щелчка и сохраните идентификатор целевого элемента в качестве href привязки.
Kevin B 21 окт. 2013, в 20:47
1

Можете ли вы опубликовать фактический HTML-код, который вы будете использовать, включая дополнительный текст?
j08691 21 окт. 2013, в 20:48
0

только что опубликовал новую скрипку, содержащую HTML
Ryan Tuck 21 окт. 2013, в 21:19

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Вы можете, но было бы лучше вместо этого использовать атрибут данных, по моему мнению, для хранения целевого дополнительного элемента содержимого, а не класса, таким образом, вам не нужно анализировать classNames элемента title или иметь if elseif другое заявление Или, что еще лучше, используйте тег привязки, так как это действительно событие щелчка и сохраните идентификатор целевого элемента в качестве href привязки.
Можете ли вы опубликовать фактический HTML-код, который вы будете использовать, включая дополнительный текст?
только что опубликовал новую скрипку, содержащую HTML

Victor · Answer 1 · 2013-10-21T19-53-00.000Z

$('.subject').click(function(e){
e.stopPropagation();
e.preventDefault();

//use a specific class name like 'insideDiv' for the divs that are inside your main ones instead of div.another below

if ($(this).find('div.another').is(":visible"))
{$(this).find('div.another').hide();}
else
{$(this).find('div.another').show();}
});