切换一堆 div 也改变 link

Question

我有一堆 div，用一个以字符串开头的 ID 标识 (kind = "brand")。我想通过单击跨度内的 href 来切换 div 的可见性。我希望这个 link 的文本从 "SHOW" 更改为 "HIDE"。

没有文字的变化，功能只有一行：

  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>

...

Answer 1

只需在您的 LINK 中添加一个 class，这样您就知道它是否正在显示。此外，您可以使用 "Starts With" 从 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"));
    }

    }
});

还没有机会测试代码，但您从中得到了灵感。如果您仍然需要它，请告诉我，我会尝试将其作为一个工作示例。

Answer 2

我不确定我是否理解正确，但这是代码。 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(); // Toggle visible
    $(this).text(show_hide_text[+$content.is(':visible')]); // Change text
  });
});

<!doctype html>
<html>
  <head>
    <title>Whosebug 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>

切换一堆 div 也改变 link

Toggle a bunch of divs also changing the link

html

jquery

text

visibility

toggle