Question

我试图想出一个很好的解决方案来轻松添加菜单页面。每个菜单页面都应该是一个div，其中包含类＆＃39; shTab＆＃39;为了识别它是一个显示/隐藏元素，我还想给每个div一个唯一的名称，所以我可以创建具有该名称的按钮作为文本。

我用硬编码的html创建每个div，我想要一个jQuery函数首先获取所有div并将其放入我的数组标签中。

然后我想迭代使用tabs数组，对于每个div，我将创建一个应该附加到buttonContainer类的按钮，这样所有按钮都会像普通菜单一样位于同一区域。

我还希望为每个创建的按钮创建一个on。点击功能，它将.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();
          }
      })
    );
  }

});

我注意到＆＃39; div＆＃39;我的for循环中的对象不能作为jQuery对象工作，.hide（），。name ....等不按我的意图工作。

我做错了什么？

Answer 1

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

＆＃13;

// 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();
})

＆＃13;

<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>

＆＃13;

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>

使用类名动态创建每个div的按钮，并在点击功能

2 个答案: