Переключить кучу divs, также меняя ссылку

У меня есть куча divs, идентифицированная идентификатором, начинающимся со строки (kind = "brand"). Я хочу переключить видимость divs, щелкнув href внутри пролета. Я хочу, чтобы текст этой ссылки изменился с «SHOW» на «HIDE».Переключить кучу divs, также меняя ссылку

Без изменения текста, функция просто onle линия:

jQuery("#" + kind + "-" + value).toggle();

, но с текстом я не могу по добавить одну строку за другой, сезам почти 15 строк кода. Наверняка это намного проще.

Обновленный код

  function show_hide(brand, value){ 
       var show_hide_text = ["SHOW", "HIDE"]; 
       var id_selected = jQuery("#" + brand + "-" + value).attr("id"); 
       jQuery('div[id ^= "' + brand + '"]').each(function() { 
        if(this.id != id_selected){ 
         jQuery(this).hide(); 
         jQuery("#" + this.id.replace("-", "-show-")).html(show_hide_text[0]); 
        }else{ 
         var visi = (jQuery("#" + brand + "-show-" + value).html() == show_hide_text[0]) ? 1 : 0; 
         jQuery("#" + brand + "-show-" + value).html(show_hide_text[visi]); 
        } // if 
       }); 
       jQuery("#" + brand + "-" + value).toggle(); 
      } // function

HTML-код будет идти, как это (только один DIV показан):

<div ><h3 >SUPER BRAND <a href="javascript: void(0);" onClick="hide_show('brand', 'Super-brand');"><span id=brand-show-Super-brand">SHOW</a></span></h3> 
     <div class="brand" id="brand-Super-brand"> 
      <div>PRODUCT #1</div> 
     </div> 
    </div> 

    <div ><h3 >MEGA BRAND <a href="javascript: void(0);" onClick="hide_show('brand', 'Mega-brand');"><span id=brand-show-Mega-brand">SHOW</a></span></h3> 
     <div class="brand" id="brand-Mega-brand"> 
      <div>PRODUCT #3</div> 
     </div> 
    </div> 

...

источник

2016-08-16 Cesar

Не могли бы вы предоставить examaple HTML-код? – jacqbus

HTML добавлен в вопрос – Cesar

Я не уверен, правильно ли я вас понимаю, но вот код. HTML также немного изменился.

$(document).ready(function(){ 
 
    var show_hide_text = ["SHOW", "HIDE"]; 
 
    $('.show-hide-content').hide(); 
 
    $('.show-hide-toggle').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var $content = $(this).parent().next('.show-hide-content'); 
 
    $('.show-hide-content').not($content).hide().prev().children('a').text(show_hide_text[0]); 
 
    $content.toggle(); \t // Toggle visible 
 
    $(this).text(show_hide_text[+$content.is(':visible')]); \t // Change text 
 
    }); 
 
});

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>StackOverflow Testing Page</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
    </head> 
 
    <body> 
 
    <div> 
 
     <h3>SUPER BRAND <a href="#" id="brand-show-Mega-brand" class="show-hide-toggle">SHOW</a></h3> 
 
     <div class="brand show-hide-content" id="brand-Super-brand"> 
 
     <div>PRODUCT #1</div> 
 
     </div> 
 
    </div> 
 

 
    <div> 
 
     <h3>MEGA BRAND <a href="#" id="brand-show-Mega-brand" class="show-hide-toggle">SHOW</a></h3> 
 
     <div class="brand show-hide-content" id="brand-Mega-brand"> 
 
     <div>PRODUCT #3</div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

источник

2016-08-16 13:00:52 jacqbus

Проблема заключается в том, что когда вы нажимаете одну марку, другой div также должен переключаться, а его видимый набор равен false, а также текст должен меняться, от «СКРЫТЬ» до «ПОКАЗАТЬ». Если вы нажмете один бренд, а затем другой, вы увидите. Я сократил свой код до 11 строк вместо 7, но все еще вижу слишком много кода. – Cesar

Итак, если вы нажмете один бренд, вы хотите открыть все div с тем же брендом? или вы хотите открыть только одну марку и спрятать друг друга? – jacqbus

Точно, последнее поведение. Я обновляю приведенный выше код до того, что у меня есть, что является минимальным, которого я смог достичь. – Cesar

Просто добавить класс в LINK, так что вы знаете, если это является показаны или нет. Кроме того, вы можете использовать «начинается с» от Jquery к identify objects that start with:

$("#YourLinkID").click(function(kind,value){ 

    // Your previous code. 
    // 
    if($(this).hasClass("show")) 
    { 
     if($(this).html("Your HTML for Hide Link")); 
     $(this).removeClass("show"); 
    } 
    else 
    { 
     if($(this).html("Your HTML for Show Link")); 
    } 

    } 
});

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

источник

2016-08-16 12:24:09 ProgrammerV5

Проблема заключается в том, когда вы нажимаете другую ссылку, она должна переключать все остальные div. Я сократил до 10 строк кода, но все же должен получить видимость. Я опубликую, если найду лучшее решение, я подумал о вашем подходе к удалению или добавлению классов, но только затронутый текст может показаться каким-то образом лишним для достижения этого уровня. Спасибо за подсказку startwith, это очень полезно. – Cesar

Переключить кучу divs, также меняя ссылку

ответ

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