Question

我在使用$ .fn.extend jQuery函数方面经验不足；下面的代码无法正常工作，并且似乎可以正常工作，因为我已经从StackOverflow答案（jQuery Toggle Text?）复制并粘贴了它下面的代码很简单，只要我能找到第二个功能不起作用的地方... JSFiddle（http://jsfiddle.net/qxcwo51n/16/），但是在我的私有站点上的工作示例中，“ toggle_active_iot”有效，但扩展功能不起作用< / p>

$.fn.extend({
  toggleText: function(a, b) {
    return this.text(this.text() == b ? a : b);
  }
});

function toggle_active_iot(link) {
  $('.iot-items').toggleClass('active');
  $('.iot-products').toggleClass('active');
}

.iot-items,
.iot-products {
  display: none;
}

.active {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-md-12'>
  <h3 style='background-color:#151515;color:white;padding:10px;margin:0px;'>
    <i class="far fa-hdd"></i>&nbsp;Internet of Things
    <button onClick="$(this).toggleText('Items','Products');toggle_active_iot(this);">Items</button>
  </h3>
</div>
<div class='iot-items active'>
  Test Items
</div>
<div class='iot-products'>
  Test Products
</div>

Answer 1

您的小提琴不起作用，因为您已将JS配置为放置在window.load处理程序中。由于on *事件功能的使用已过时，因此功能必须位于全局范围内，因此请更改设置以将JS放在jsfiddle.net/qxcwo51n/28之前。这也是为什么我添加到您的问题中的代码片段起作用的原因。我建议您摆脱onclick属性，并使用适当的不干扰事件处理程序，将其作为jQuery的on（）

在评论中回答了该问题，由于没有人写出答案，我将此答案设为社区Wiki 答案。这是为了从未答复的清单。最初的答案是@RoryMcCrossan。鼓励OP选择此作为回答以删除未回答的问题状态。（如果该人在评论中回答的人决定做出回答，OP可以并且应该请选择该答案）。

使用$ .fn.extend（）创建jQuery函数

1 个答案: