在链接点击中更改div中的内容

时间：2017-02-01 11:06:26

标签： javascript jquery

我一直在努力使the first answer of this question的答案适应我自己的练习项目。建立一个简历网站，我希望能够根据点击超链接显示三个不同的投资组合。

我的改编是here。 HTML：

<body>
  <section class="portfolio-container">
        <div id="menu-picker">
            <a href="#" data-id="1" class="menu-text">Portfolio 1</a>
            <a href="#" data-id="2" class="menu-text">Portfolio 2</a>
            <a href="#" data-id="3" class="menu-text">Portfolio 3</a>
        </div><!--/menu-picker-->
        <div id="pages">
         <div class="mydivshow portfolio1">
           <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
         </div><!--/portfolio-div1-->
         <div class="mydivhide portfolio2">
           <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
         </div><!--/portfolio-div2-->
         <div class="mydivhide portfolio3">
           <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
         </div><!--/portfolio-div3-->
       </div><!--/pages-->
  </section><!--/portfolio-container-->
</body>

jQuery的：

$(document).ready(function() {
    var buttons = $("#menu-picker").find("a");
    $("buttons").click(function() {
       var id = $(this).attribute("data-id"); 
       $("#pages div").hide();
       $(".portfolio" + id).show();
    });
});

我已经更改了class和data-id名称，所以我可以使它适合我正在构建here的其余部分。我正在创建buttons变量的原因是因为文档的其余部分有更多的超链接。

需要做的是：当您点击“投资组合1”链接时，需要显示类别为“portfolio1”的div，并且需要隐藏其他两个投资组合。我现在还不太明白我做错了什么。

提前致谢！

2 个答案:

答案 0 :(得分：5)

jQuery中没有getTime方法，使用attribute()或attr()方法获取data()属性值。

data-*

还有一个错误，var id = $(this).attr("data-id"); // or var id = $(this).data("id"); 会尝试选择名为$("buttons")的标记元素，因此不会选择任何内容。为了使其工作，使用缓存的jQuery对象更新选择器。 

buttons

$(document).ready(function() {
    var $buttons = $("#menu-picker a");
    $buttons.click(function() {
       var id = $(this).attribute("data-id"); 
       $("#pages div").hide();
       $(".portfolio" + id).show();
    });
});

$(document).ready(function() {
  var $buttons = $("#menu-picker a");
  $buttons.click(function() {
    var id = $(this).attr("data-id");
    $("#pages div").hide();
    $(".portfolio" + id).show();
  });
});

UPDATE 1：使用缓存的jQuery对象的更好方法。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <section class="portfolio-container">
    <div id="menu-picker">
      <a href="#" data-id="1" class="menu-text">Portfolio 1</a>
      <a href="#" data-id="2" class="menu-text">Portfolio 2</a>
      <a href="#" data-id="3" class="menu-text">Portfolio 3</a>
    </div>
    <!--/menu-picker-->
    <div id="pages">
      <div class="mydivshow portfolio1">
        <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div1-->
      <div class="mydivhide portfolio2">
        <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div2-->
      <div class="mydivhide portfolio3">
        <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div3-->
    </div>
    <!--/pages-->
  </section>
  <!--/portfolio-container-->
</body>

// cache the divs
var $divs = $("#pages > div");
// bind the click event handler
$("#menu-picker a").click(function() {
  // hide all div, filter out the div to show and show it
  $divs.hide().filter(".portfolio" + $(this).data('id')).show();
});

var $divs = $("#pages > div");
$("#menu-picker a").click(function() {
  $divs.hide().filter(".portfolio" + $(this).data('id')).show();
});

<小时/> 更新2 ：要仅显示第一个元素，请将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <section class="portfolio-container"> <div id="menu-picker"> <a href="#" data-id="1" class="menu-text">Portfolio 1</a> <a href="#" data-id="2" class="menu-text">Portfolio 2</a> <a href="#" data-id="3" class="menu-text">Portfolio 3</a> </div> <!--/menu-picker--> <div id="pages"> <div class="mydivshow portfolio1"> <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p> </div> <!--/portfolio-div1--> <div class="mydivhide portfolio2"> <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p> </div> <!--/portfolio-div2--> <div class="mydivhide portfolio3"> <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p> </div> <!--/portfolio-div3--> </div> <!--/pages--> </section> <!--/portfolio-container--> </body>设置为剩余（第一个除外）或手动触发点击事件。

使用CSS：

display : hidden

#pages > div:not(:first-child){
   display:none;
}

/*or*/
#pages > div:nth-child(n+2){
   display:none;
}

var $divs = $("#pages > div");
$("#menu-picker a").click(function() {
  $divs.hide().filter(".portfolio" + $(this).data('id')).show();
});
#pages > div:nth-child(n+2) {
  display: none;
}

使用jQuery：

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

<body>
  <section class="portfolio-container">
    <div id="menu-picker">
      <a href="#" data-id="1" class="menu-text">Portfolio 1</a>
      <a href="#" data-id="2" class="menu-text">Portfolio 2</a>
      <a href="#" data-id="3" class="menu-text">Portfolio 3</a>
    </div>
    <!--/menu-picker-->
    <div id="pages">
      <div class="mydivshow portfolio1">
        <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div1-->
      <div class="mydivhide portfolio2">
        <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div2-->
      <div class="mydivhide portfolio3">
        <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div3-->
    </div>
    <!--/pages-->
  </section>
  <!--/portfolio-container-->
</body>

$("#menu-picker a").click(/* clickhandler */).first().click();

var $divs = $("#pages > div");
$("#menu-picker a").click(function() {
  $divs.hide().filter(".portfolio" + $(this).data('id')).show();
}).first().click();

答案 1 :(得分：2)

有两个问题。

首先，如果您指的是变量，请致电$('buttons')，$(buttons)。

其次，如其他地方所述，jQuery没有方法attribute()。这将在错误控制台中显示为错误。它的作用是attr()。

您还可以简化/优化代码 - 尤其是利用event delegation的概念。

$('#menu-picker').on('click', 'a', function() {
    $(".portfolio"+$(this).data('id')).show().siblings('.portfolio').hide();
});

事件现在绑定到一个元素，而不是多个 - 并且在运行时评估该事件的触发器。 （这是一般的做法，除了这个问题范围之外的其他原因。）

相关问题
最新问题