使用$ .fn.extend（）創建jQuery函數

Question

我在使用$ .fn.extend jQuery函數方面經驗不足； 下面的代碼無法正常工作，似乎可以正常工作，因為我已經從該StackOverflow答案中復制並粘貼了它（ jQuery Toggle Text？ ）。下面的代碼很簡單，只要我能找到第二個函數不起作用的地方。 。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（）

---

在評論中回答了該問題，並且由於沒有人寫出答案，因此我將此答案作為社區Wiki的答案。 這是從未答復的列表中刪除此問題。 最初的答案是@RoryMcCrossan。 鼓勵OP選擇此答案作為答案，以刪除未答復的問題狀態。 （如果在評論中回答的人決定做出回答，則OP可以並且應該選擇該回答）。