为每个具有类名的 div 动态创建按钮，并创建显示/隐藏单击功能

Question

我正在尝试想出一个很好的解决方案来轻松添加菜单页面。 每个菜单页面都应该是一个带有“shTab”类的 div，以标识它是一个显示/隐藏元素，我还想给每个 div 一个唯一的名称，这样我就可以创建具有该名称的按钮作为文本。

我正在使用硬编码的 html 创建每个 div，我想要一个 jQuery 函数首先获取所有 div，然后将其放入我的数组选项卡中。

然后我想遍历 tabs 数组，并为每个 div 创建一个按钮，该按钮应附加到 buttonContainer 类，以便所有按钮都像普通菜单一样位于同一区域。

我还希望为每个创建的按钮创建一个单击功能，该功能将 .hide() 所有选项卡，最后 .show() 属于单击按钮的选项卡。

我试图让它在jsFiddle 中工作，但我在尝试迭代它们时遇到了我的 div 元素的问题（我认为这就是问题所在）。

html

<div class='buttonContainer'>

</div>
<div class='container'>
  <div class='shTab' name='home'>
    <p>Homepage! yay</p>
  </div>
  <div class='shTab' name='contact'>
    <p>Contact page! yay</p>
  </div>
  <div class='shTab' name='images'>
    <p>no images yet :(</p>
  </div>
</div>

javaScript

var tabs = [];

$(document).ready(function(){

  $('div.shTab').each(function(i, obj) {
        tabs.push(obj);
  });

  for (var div in tabs) {
    div.hide();
    $('.buttonContainer').append(
            $('<button/>', {
          text: div.name,
          click: function () {
            for (var div in tabs) {
              div.hide();
            }
            this.show();
          }
      })
    );
  }

});

我注意到我的 for 循环中的 'div' 对象不能作为 jQuery 对象工作，.hide()、.name .... 等不能按我的意图工作。

我做错了什么？

Answer 1

同样的事情，通过 jQuery 完成。 Here's the fiddle，如果你需要的话。

// Create the tabs collection...
var tabs = $('.shTab');
// create the buttons, based on the tabs themselves
for (var i = 0; i < tabs.length; i++) {
  // wrap the individual tab in the jQuery object.
  var tab = $(tabs[i]);
  // use the tab's name attribute for the button text.
  var btn = $('<button>').html(tab.attr("name"));
  // hide the current tab.
  tab.hide();
  // Add the button to the containing div.
  $('.buttonContainer').append(btn);
}
/*****
 * event listener for the click
 *   NOTE: Because I've added the buttons dynamically,
 *    I can't simply listen to them as a set. I can
 *    either re-create the listener with each button,
 *    or use EVENT DELEGATION!
 *****/
$(".buttonContainer").on("click", "button", function() {
  // use the index of the clicked button to index the
  //  appropriate tab.
  var buttonIndex = $(this).index();
  var tab = $(tabs[buttonIndex]);

  // Show the current tab...
  tab.show()
    // ... and hide all the siblings!
    .siblings().hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='buttonContainer'>

</div>
<div class='container'>
  <div class='shTab' name='home'>
    <p>Homepage! yay</p>
  </div>
  <div class='shTab' name='contact'>
    <p>Contact page! yay</p>
  </div>
  <div class='shTab' name='images'>
    <p>no images yet :(</p>
  </div>
</div>

Answer 2

我通过查看所有帮助找到了答案。非常感谢。

$(document).ready(function(){
  var tabs = [];

	$('div.shTab').each(function(i, obj) {
        tabs.push($(obj));
  });

  for (var i = 0; i < tabs.length; i++) {
  	tabs[i].hide();
    $('.buttonContainer').append(
		$('<button/>', {
          text: tabs[i].attr('name'),
          click: function (event) {
            for (var i = 0; i < tabs.length; i++) {
              tabs[i].hide();
              if(tabs[i].attr('name') === event.target.innerHTML){
                tabs[i].show();
              }
            }
          }
      })
    );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='buttonContainer'>

</div>
<div class='container'>
  <div class='shTab' name='home'>
    <p>Homepage! yay</p>
  </div>
  <div class='shTab' name='contact'>
    <p>Contact page! yay</p>
  </div>
  <div class='shTab' name='images'>
    <p>no images yet :(</p>
  </div>
</div>