Почему мой обмен div на .class не работает? - PullRequest
0 голосов
/ 10 сентября 2011

Не удается преобразовать следующий код из идентификаторов в классы.

В основном то, что делает код, показывает один Div, а другой скрывает.

В оригинальной версии это было просто, потому что расположение div было абсолютным.

В версии классов мне нужно раскрыть следующий экземпляр «product-specs», в зависимости от того, на каком DIV был размещен onClick.

ПРИМЕЧАНИЕ / РЕДАКТИРОВАТЬ: Это несколько версий одних и тех же классов на странице. Таким образом, ссылки на классы должны быть привязаны к ближайшему экземпляру класса в зависимости от местоположения ссылки, по которой щелкнули.

HTML:

<div id="product-details">
    <area shape="rect" onClick="swap3('product-details','product-specs');">
</div>
<div id="product-specs">
    <p>Content</p>
</div>

Javascript:

function swap3(oldDivId, newDivId) {
    var oldDiv = document.getElementById(oldDivId);
    var newDiv = document.getElementById(newDivId);
    oldDiv.style.display = "none";
    newDiv.style.display = "block";
}

Однако теперь мне нужно добавить несколько экземпляров сведений о продукте Div & Products specs

Новый HTML:

<div class="product-details">
    <area shape="rect" onClick="swap3('product-   details','product-specs');">
</div>

<div class="product-specs">
    <p>Content</p>
</div>


<div class="product-details">
    <area shape="rect" onClick="swap3('product-   details','product-specs');">
</div>
<div class="product-specs">
    <p>Content</p>
</div>

Новый Javascript:

????????

Ответы [ 5 ]

2 голосов
/ 10 сентября 2011

Примечание: (я объясняю полный код до здесь , поэтому просто поместите обновленный здесь) помните, что когда ваш селектор является className, вы получите массив! измените код следующим образом и повторите тест:

function swap3(currentDivId ,oldDivId, newDivId) {
    var oldDiv = $(currentDivId).nextAll("div." + oldDivId);
    var newDiv = $(currentDivId).nextAll("div." + newDivId);
    $(oldDiv).each(function(){ $(this).css({"display" : "none"}); });
    $(newDiv).each(function(){ $(this).css({"display" : "block"}); });
}
1 голос
/ 10 сентября 2011

Чтобы скрыть div «details» и показать следующий непосредственно за div, предположительно «specs», попробуйте этот фрагмент jQuery. Он прикрепляет обработчик кликов к каждому div «product-details», а при его запуске скрывает этот div и показывает ближайшего брата:

$(".product-details").click( function() {
    $(this).hide();
    $(this).next().show();
});

Обратное поведение (скрытие спецификаций и показ деталей) оставлено читателю в качестве упражнения; -)

1 голос
/ 10 сентября 2011

В нативном JavaScript вы бы использовали getElementsByClassName() - но не поддерживается в IE до версии 8. Вы можете использовать специально созданный скрипт-обертку, такой как этот или используйте библиотеку, такую ​​как jQuery, чтобы абстрагироваться от различий в браузере.

В jQuery попробуйте что-то вроде

function swap( oldClassName, newClassName ) {
    $("'." + oldClassName + "'").hide();
    $("'." + newClassName + "'").show();    
}
0 голосов
/ 10 сентября 2011

Что-то еще, что вы можете сделать, это обернуть каждый из ваших продуктов в div без какого-либо класса или идентификатора. Имеет смысл сгруппировать их так, что-то вроде

<div>    
    <div class="product-details">

        <area shape="rect" onClick="swap3('product-   
details','product-specs');">

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>

</div>

<div>
    <div class="product-details">

        <area shape="rect" onClick="swap3('product-   
details','product-specs');">

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>
</div>

Обратите внимание на дополнительные элементы div. Теперь вы можете использовать родительский элемент для определения характеристик продукта, которые вы должны показать. Например: (может быть, есть лучший способ сделать это)

$('.product-details').click(function() {
    // Find the specs to show
    var $specs = $(this).siblings('.product-specs');
    // Hide the other ones
    $('.product-specs').not($specs).hide();
    // Show the one that you want
    $specs.show();
});

Надеюсь, что это работает!

0 голосов
/ 10 сентября 2011

Оригинал:

function swap3(oldDivId, newDivId) {
    var oldDiv = document.getElementById(oldDivId);
    var newDiv = document.getElementById(newDivId);
    oldDiv.style.display = "none";
   newDiv.style.display = "block";
}

JQuery:

function swap3(oldDivId, newDivId) {
    var $oldDiv = $('#' + oldDivId);
    var $newDiv = $('#' + newDivId);
    $oldDiv.hide();
    $newDiv.show();
}

Классы jQuery:

function swap3(oldDivClass, newDivClass) {
    var $oldDiv = $('.' + oldDivClass);
    var $newDiv = $('.' + newDivClass);
    $oldDiv.hide();
    $newDiv.show();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...