如何在不知道用户查看的内容和他们想要查看的内容的情况下遍历 div

Question

我有一组 DIV

一个 DIV 最初设置为没有 .hidden 属性，所有其他人都有它。

我有一组 HREF 的调用 DIV 将使其显示。

我有一个用于“隐藏显示：无；”的 css和“显示显示：块；”

我希望能够循环遍历所有 div，删除所选 div 的 .hidden 属性并放置 OLD div 的 .hidden 属性...

简单吧？我对 JQ 的了解是有限的，并且在路上颠簸......就像现在一样。

代码如下：

<section id='content'>
  <div id='stuff1' class='somestuff hidden'>
      <p>Hello World 1</p>
  </div>
  <div id='stuff2' class='somestuff'>
      <p>Hello World 2</p>
  </div>
  <div id='stuff3' class='somestuff hidden'>
      <p>Hello World 3</p>
  </div>
  <div id='stuff4' class='somestuff hidden'>
      <p>Hello World 4</p>
  </div>
  <div id='stuff5' class='somestuff hidden'>
      <p>Hello World 5</p>
  </div>
</section>

这是资产净值：

<div id='nav'>
   <a href='#' onclick='changePage(this.id)' id='stuff1'>Click for Content 1</a>
   <a href='#' onclick='changePage(this.id)' id='stuff2'>Click for Content 2</a>
   <a href='#' onclick='changePage(this.id)' id='stuff3'>Click for Content 3</a>
   <a href='#' onclick='changePage(this.id)' id='stuff4'>Click for Content 4</a>
   <a href='#' onclick='changePage(this.id)' id='stuff5'>Click for Content 5</a>    
</div>

最后我相信是函数：

<script>

        function changePage(currPage)
        {

            $(document).ready(function() {
                $('#' + currPage + 'Page .contentBody').each(function(i, j) {
                    console.log(i); //the i
                    console.log(j); //the div

                    $('#' + currPage + 'Page' + "Page").removeClass('hiddenstuff');
                    $('#' + currPage + 'Page' + "Page").addClass('hiddenstuff');

                });
            });

        }       


</script>

是的，我知道这个功能无处不在，但本质上，我怎么知道用户会点击什么以及他们什么时候点击，他们刚刚离开了哪一个，他们要去哪一个？？？嗯嗯？

谢谢

Answer 1

通常这种工作是通过使用锚标记的 href 来完成的，这样它就可以在非 JavaScript 环境中优雅地降级。

其次，与其传递锚标记的id，为什么不传递href，因为它现在在href中？或者，当我们这样做的时候，完全通过this。此外，您还需要从 changePage 返回响应，以便我们可以防止页面跳转。

<a href='#stuff1' onclick='return changePage(this)'>Click for Content 1</a>
<a href='#stuff2' onclick='return changePage(this)'>Click for Content 2</a>
<a href='#stuff3' onclick='return changePage(this)'>Click for Content 3</a>

现在，我们可以从内容 div id 中删除“Page”。

<section id='content'>
  <div id='stuff1' class='somestuff hidden'>
      <p>Hello World 1</p>
  </div>
  <div id='stuff2' class='somestuff'>
      <p>Hello World 2</p>
  </div>
  <div id='stuff3' class='somestuff hidden'>
      <p>Hello World 3</p>
  </div>
  <div id='stuff4' class='somestuff hidden'>
      <p>Hello World 4</p>
  </div>
  <div id='stuff5' class='somestuff hidden'>
      <p>Hello World 5</p>
  </div>
</section>

所有这些都准备好了，这就是 javascript 的样子：

function changePage(el) {
    var target = $(el).attr("href"); // using jQuery to avoid an IE inconsistency
    $(target).show().siblings().hide();
    // prevent page jump
    return false;
}

简单吧？好吧，它可以更简单。

<a href='#stuff1' class="changepage">Click for Content 1</a>
<a href='#stuff2' class="changepage">Click for Content 2</a>
<a href='#stuff3' class="changepage">Click for Content 3</a>

和js：

$(document).ready(function(){
    $(".changepage").click(function(){
        var target = $(this).attr("href"); // using jQuery to avoid an IE inconsistency
        $(target).show().siblings().hide();
        // prevent page jump
        return false;
    });
});

如开始所述，要使其降级，请添加一个无脚本标记，其中包含显示 .hidden div 的内联样式。

Answer 2

首先您不需要在函数中使用 document.ready..其次 id 应该始终是唯一的..具有相同 id 的多个元素是无效的。

试试这个

将您的 <a> id 更改为 data-id（使用 HTML5 数据属性）。这应该使所有 id 都是唯一的。

 <a href='#' onclick='changePage(this)' data-id='stuff1'>Click for Content 1</a>

和 javascript (jquery)

function changePage(currObj)
{
   $('.somestuff').addClass('hidden'); 
   $('#' + $(currObj).data('id')).removeClass('hidden');

}       

考虑到somestuff 类存在于所有 div 中。如果不向所有 div 添加公共类并使用类选择器..