overwrite the show method in jquery

问题

am editing a web app (not my code) , and has alot of modals show up when some message or notification come so i want to add a sound for that modal

the problem that this modal is in all over the app , and alot of jquery .show methods i should track and add that sound

 $('#ajax_alert').show();

i tried to listen to a change, like changing in css attributes but didn't work

$('#ajax_alert').on("change",function(){
//make sound
})

how can i overwrite the show method ? i can trigger the sound inside it by checking if triggered id is ajax_alert, play that sound !

回答1:

I agree with the comments that it's probably not the best idea and it seems a bit hacky, but it can be done.

So what the JQuery .show() method does is just change an element's CSS to display: block; right? So you can overwrite the .show method, but tell it to keep doing that and then also add some additional functionality:

jQuery.fn.show = function() {
   this.css('display', 'block');
   setTimeout(() => alert('My very own added functionality'), 0);
   return this;
};

$('a').click(function() {
   $('div').show()
})

div {margin-top: 20px; background-color: blue; height: 60px; width: 60px; display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click to show div</a>
<div></div>

Working JSFiddle here:

来源：https://stackoverflow.com/questions/61063600/overwrite-the-show-method-in-jquery