Найти и показать определенный раздел динамически с JQuery?

0

У меня есть столбец с несколькими экземплярами подобных классов. Классы refHeader1, refHeader2, refHeader3 и ref1select, ref2select, ref3select и refScen1, refScen2, refScen3. Ниже числа заменяются на @{@i}, чтобы динамически управляться. Мне нужно, когда вы нажимаете на (this) ref @{@i} select, отображается ближайший refScen @{@i} диапазон, и все остальные части refScen @{@i} скрыты. До сих пор я пробовал jQuery ниже, не повезло. Что я делаю не так? В консоли я просто получаю пустые [] скобки, пытаясь найти ближайший. Заранее спасибо. http://jsbin.com/ezODiTAV/1/edit

JQuery

$("span[class*=select]").click(function () {
        // first hide all refScen spans
        $('span[class^=refScen]').hide();

        // show this refScen span
        //$(this).closest('span[class^=refScen]').show();
        //$(this).find().closest('span[class^=refScen]').show();
        //$(this).find().next('span[class^=refScen]').show();
});

HTML

<div class="col-md-12 padT nPadL nPadR" style="padding-bottom:10px">
    <span class='refHeader@{@i}'>
        <a href="#"><label>@item.Name</label></a>
        <div class="glyphicon glyphicon-chevron-down text-right ref@{@i}select"></div>
    </span>
</div>
<!-- /left options -->             
<span class='refScen@{@i}'>
        <div class="col-md-9 col-md-offset-3 padB nPadL nPadR">
            <a href="#">@listitem.Name</a>
        </div>
</span>
  • 1
    я не вижу ни одного промежутка с классом, содержащим термин «выбор», я вижу div
  • 0
    попробуйте jsfiddle.net/arunpjohny/6MA9X/5
Теги:
find
next
closest

2 ответа

1
Лучший ответ

Проблема refScen** не является предком элемента ref@{@i}select, это следующий родной брат одного из его предковых элементов

$("div[class*=select]").click(function () {
    $('span[class^="refScen"]').hide();
    $(this).closest('.col-md-12').next().show();
    //or $(this).parent().parent().next().show();
});

Демо: скрипка

сделать так просто, почему вы не можете добавить еще один класс к каждому из этих элементов без номера, подобного

<div class="col-md-12 padT nPadL nPadR" style="padding-bottom:10px">
    <span class='refHeader@{@i} refHeaderrefHeader'>
        <a href="#"><label>@item.Name</label></a>
        <div class="glyphicon glyphicon-chevron-down text-right ref@{@i}select rfselect"></div>
    </span>
</div>
<!-- /left options -->             
<span class='refScen@{@i} refScen'>
        <div class="col-md-9 col-md-offset-3 padB nPadL nPadR">
            <a href="#">@listitem.Name</a>
        </div>
</span>

тогда

$(".rfselect").click(function () {
    $('.rfselect').hide();
    $(this).closest('.col-md-12').next().show();
    //or $(this).parent().parent().next().show();
});
  • 0
    Вопрос обновлен выше с примером jsbin. Все еще не могу заставить это работать.
  • 0
    похоже, что refScen3 находится внутри refScen2 , это желаемое поведение ...
Показать ещё 1 комментарий
0

вы пропустите некоторые ' и " попробуйте:

$("span[class*='select']").click(function () {
        // first hide all refScen spans
        $('span[class^="refScen"]').hide();

        $(this).closest('.col-md-12').next().show()
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню