Kombinieren/Verfeinern von zwei identischen Blöcken von jQuery

Question

Ich habe zwei Blöcke von Code, die genau gleich funktionieren, aber unabhängig voneinander abgefeuert werden müssen, um eine Überlappung der Funktionalität zu verhindern.

//Block One 
 
jQuery('.top_searchicon').on('click touchstart', (function(e) { 
 
    e.preventDefault(); 
 
    jQuery(this).toggleClass('active'); 
 
    jQuery('.top_blog_search').toggleClass('active'); 
 
})); 
 

 
//Block Two 
 
jQuery('.searchicon').on('click touchstart', (function(e) { 
 
    e.preventDefault(); 
 
    jQuery(this).toggleClass('active'); 
 
    jQuery('.blog_search').toggleClass('active'); 
 
}));

Thank you very much.

Answer 1

Sie können Selektoren mit einem Komma kombinieren (,). Sie können dann is() und ein ternäres Element verwenden, um das entsprechende Element auszuwählen, um die Klasse active einzuschalten. Versuchen Sie folgendes:

jQuery(function($) { 
    $('.top_searchicon, .searchicon').on('click touchstart', (function(e) { 
     e.preventDefault(); 
     var $el = $(this).toggleClass('active'); 
     var targetClass = $el.is('.searchicon') ? '.blog_search' : '.top_blog_search'; 
     $(targetClass).toggleClass('active'); 
    }); 
}); 

Beachten Sie die Verwendung des Parameters in der Bereitschafts Handler, das Sie die $ noch nutzen können jQuery im Rahmen Ihrer document.ready Handler zu verweisen.

Answer 2

Eine Alternative zur Verwendung des gleichen Event-Handlers und zur Überprüfung innerhalb des Event-Handlers besteht darin, Parameter an den Event-Handler zu übergeben.

jQuery('.top_searchicon').on('click touchstart', function() { 
    handleClickTouchStart(".top_blog_search"); 
}); 
jQuery('.searchicon').on('click touchstart', function() { 
    handleClickTouchStart(".blog_search"); 
}); 
function handleClickTouchStart(selector) 
{ 
    e.preventDefault(); 
    jQuery(this).toggleClass('active'); 
    jQuery(selector).toggleClass('active'); 
} 

Auf diese Weise können Sie neue Handler hinzufügen, ohne dass zu dem Handler-Code ändern (die mit mehr als zwei Optionen .is ziemlich chaotisch werden würde (was OFC Ordnung ist, wenn man nur zwei, vielleicht 3)), zB :

jQuery('.another_searchicon').on('click touchstart', function() { 
    handleClickTouchStart(".another_blog_search"); 
}); 

---

Der nächste Schritt -data Attribute zu verbinden, die beide zu verwenden sei.
Dies bietet Ihnen den Vorteil, dass Sie neue Elemente hinzufügen können, ohne Code ändern zu müssen!

jQuery('.searchhandler').on('click touchstart', function() { 
    e.preventDefault(); 
    jQuery(this).toggleClass('active'); 
    var other = jQuery(this).data("related"); 
    jQuery(other).toggleClass('active'); 
}); 

und ändern Sie Ihre Markup passende -Daten hinzufügen (Spekulieren auf dem Markup hier):

<button type='button' class='searchhandler' data-related='.top_blog_search'>top search</button> 
<button type='button' class='searchhandler' data-related='.blog_search'>blog search</button> 

<div class='top_blog_search'></div> 
...etc 

eine weitere hinzuzufügen.

<button type='button' class='searchhandler' data-related='.another_search'>another search</button> 
<div class='another_search'></div>