时间戳

首页 > 解决方案 > 无法使用此 onclick 功能显示 p 标签

javascript - 无法使用此 onclick 功能显示 p 标签

问题描述

我在 Jquery 方面有一点经验，在这里我试图创建一个 jquery 插件，但我被困在这里，我试图显示 p 标签元素按钮被点击，

$(function() {
  var myFirst = {
    paragraph: $('p'),
    init: function() {
      $("<button></button>", {
          text: "My New Button"
        }).appendTo('.mybutton')
        .on('click', function() {
          $(this).find('p').show();
        });
    }
  }
  myFirst.init();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mybutton"></div>

<p style="display:none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad illo nobis mollitia. Ex nemo quae vero, rem, magnam numquam repudiandae. Labore laborum officia corporis sint voluptatem est, odio quidem libero.</p>

标签： javascriptjqueryhtml

解决方案

问题在于您的 DOM 遍历。这p是button您附加的父级的兄弟姐妹，但您正试图find()在按钮内。改用parent().next('p')：

$(function() {
  var myFirst = {
    paragraph: $('p'),
    init: function() {
      $("<button></button>", {
        text: "My New Button"
      }).appendTo('.mybutton').on('click', function() {
        $(this).parent().next('p').show();
      });
    }
  }
  myFirst.init();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mybutton"></div>
<p style="display:none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad illo nobis mollitia. Ex nemo quae vero, rem, magnam numquam repudiandae. Labore laborum officia corporis sint voluptatem est, odio quidem libero.</p>

话虽如此，这里的逻辑与 HTML 的结构耦合得太紧密了。我建议在您的init()逻辑中创建所有相关元素 - 但是，如果这只是为了测试，您不一定需要深入研究。

推荐阅读