複数のdivを切り替えてリンクを変更しても

文字列（kind = "brand"）で始まるIDで識別されるdivの束があります。スパン内のhrefをクリックしてdivの表示を切り替えたいとします。私はこのリンクのテキストを "SHOW"から "HIDE"に変更します。テキストの変更がなければ複数のdivを切り替えてリンクを変更しても

、機能だけでonleラインです：

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

が、私はすることにより、コードのほとんど15行ゴマ、他の後に1行を追加することはできませんテキストに。確かにそれははるかに簡単です。

更新されたコード

  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

問題は、1つのブランドをクリックすると、：visibleがfalseに設定され、テキストが "HIDE"から "SHOW"に変更されなければならないということです。あるブランドをクリックしてからもう一方のブランドをクリックすると表示されます。私はあなたの7ではなく11行に自分のコードを減らしましたが、あまりにも多くのコードを見ています。 – Cesar

あるブランドをクリックすると、同じブランドのすべての部門を開くことができますか？またはあなたはそのブランドだけを開き、他のすべてを隠そうとしていますか？ – 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行に減らしましたが、可視性を得る必要があります。私はより良い解決策を見つけたら公開します。クラスを削除したり追加したりするあなたのアプローチについて考えましたが、それは影響を受けるテキストだけなので、何とかそのレベルに達する必要はないようです。始まりのヒントをありがとう、それは非常に便利です。 – Cesar

複数のdivを切り替えてリンクを変更しても

答えて

関連する問題