使用 $.fn.extend() 创建 jQuery Functions

Question

我在使用 $.fn.extend jQuery 函数方面几乎没有经验;下面的代码不起作用，似乎它可以工作，因为我从这个 StackOverflow 答案中复制粘贴了它(jQuery 切换文本？ 下面的代码就像我能得到的第二个函数不起作用的地方一样简单......JSFiddle (http://jsfiddle.net/qxcwo51n/16/( 但是，在我在私有站点上的工作示例中，"toggle_active_iot"有效，但扩展函数不起作用

$.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属性，使用适当的不显眼的事件处理程序，suich作为jQuery的on((

---

这个问题在评论中得到了回答，由于没有人写答案， 我把这个答案作为社区维基的答案。这是为了从 未回答的列表。 最初的答案是@RoryMcCrossan。鼓励OP选择它作为 回答：将问题状态删除为未回答。(如果此人 谁在评论中回答决定做出OP可以而且应该的答案， 改为选择该答案(。