सवाल jQuery जब तत्व दिखाई देता है


असल में, मैं सोच रहा हूं कि कोई तत्व स्वचालित रूप से किसी फ़ंक्शन को चलाने का कोई तरीका है जब कोई तत्व छुपा या दृश्यमान हो जाता है, उपयोगकर्ता पर नहीं बल्कि स्वचालित रूप से दूसरी स्क्रिप्ट में क्लिक करता है।

मैं नहीं चाहता कि यह सिर्फ एक बार चलें, क्योंकि तत्व (जैसे एक स्लाइडर) लगातार दिखाई देने से छिपे हुए होते हैं।

क्या यह कुछ ऐसा होगा जो jQuery बांधने के साथ कर सकता है? जैसे किसी फ़ंक्शन के तत्व की दृश्यता को बाध्य करना (मुझे नहीं पता कि यह कैसे लिखना है)

यदि आपको मुझे जो करने की कोशिश कर रहा है उस पर अधिक विस्तार करने की आवश्यकता है, तो मुझे बताएं। धन्यवाद

स्यूडोकोड:

$('#element').bind('display:none', function);
function(){
    //do something when element is display:none
}

$('#element').bind('display:block', function2);
function2(){
    //do opposite of function
}

40
2017-12-10 06:15


मूल


यदि आप स्वयं से छुपा या दृश्यता करते हैं, तो आप इसके बाद इसे जोड़ सकते हैं। - Hadash
क्या event तत्व की दृश्यता में परिवर्तन? - Dom
यह एक स्लाइडर है, इसलिए एक ऐसी स्क्रिप्ट है जो स्लाइड को स्वचालित रूप से बदल देती है - sl133
के संभावित डुप्लिकेट Jquery - किसी भी घटना पर कार्रवाई आग - या कम से कम स्लाइडर सुनवाई की घटनाओं को पकड़ो - mplungjan
उस @ mplungjan पर कोई दृश्यता नहीं है - sl133


जवाब:


सीएसएस परिवर्तनों का पता लगाने के लिए JQuery में कोई घटना नहीं है।
यहां देखें: jQuery में ऑनहाइड () टाइप इवेंट

हो सकता:

डोम एल 2 घटनाक्रम मॉड्यूल उत्परिवर्तन घटनाओं को परिभाषित करता है; उनमें से एक - डोमेट्रोडिफाइड वह है जिसे आपको चाहिए। माना जाता है, ये व्यापक रूप से कार्यान्वित नहीं हैं, लेकिन हैं कम से कम गेको और ओपेरा में समर्थित है ब्राउज़रों।
  स्रोत: घटना का पता लगाता है जब सीएसएस संपत्ति Jquery का उपयोग कर बदल जाती है 

घटनाओं के बिना, आप उपयोग कर सकते हैं setInterval समारोह, इस तरह:

var maxTime = 5000, // 5 seconds
    startTime = Date.now();

var interval = setInterval(function () {
        if ($('#element').is(':visible')) {
            // visible, do something
            clearInterval(interval);
        } else {
            // still hidden
            if (Date.now() - startTime > maxTime) {
                // hidden even after 'maxTime'. stop checking.
                clearInterval(interval);
            }
        }
    },
    100 // 0.1 second (wait time between checks)
);

ध्यान दें कि उपयोग कर रहा है setInterval इस तरह, घड़ी रखने के लिए, आपके पृष्ठ के प्रदर्शन को प्रभावित कर सकता है।

7 जुलाई 2018:
चूंकि इस उत्तर में हाल ही में कुछ दृश्यता और अप-वोट प्राप्त हो रहे हैं, इसलिए सीएसएस परिवर्तनों का पता लगाने पर अतिरिक्त अपडेट यहां दिया गया है:

उत्परिवर्तन घटनाओं को अब अधिक प्रदर्शन अनुकूल उत्परिवर्तन पर्यवेक्षक द्वारा प्रतिस्थापित किया गया है।

MutationObserver इंटरफ़ेस DOM पेड़ में किए जा रहे परिवर्तनों को देखने की क्षमता प्रदान करता है। इसे पुराने उत्परिवर्तन घटनाओं की सुविधा के प्रतिस्थापन के रूप में डिज़ाइन किया गया है जो DOM3 ईवेंट विनिर्देश का हिस्सा था।

देखें: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver


26
2017-12-10 06:23



यह काम करेगा, इसलिए मुझे नहीं पता कि डाउन-वोटर इस बात पर टिप्पणी क्यों नहीं कर सकता कि उसने क्यों मतदान किया - उदाहरण के लिए कि चीजों की निगरानी करने के लिए शायद यह एक बड़ी बात नहीं है, लेकिन यदि हम सब कुछ कर सकते हैं तो यह एक समाधान है - mplungjan
ठीक है, यह चयनकर्ता के साथ काम करता है: छुपा, लेकिन मुझे लगता है कि यह केवल एक बार लोड होता है। क्या आप परिवर्तन देखने के लिए मेरे संपादित ओपी देख सकते हैं? - sl133
$('#element').not(':visible') मैच होगा display:none, तो यह काम कर सकता है। क्या तुमने कोशिश की? - P5Coder
मुझे लगता है कि बूलियन देखना था कि क्या आप दृश्यमान से छिपे हुए और इसके विपरीत बदल गए हैं - mplungjan
@tariq: जानकारी के लिए धन्यवाद। मेरा जवाब अपडेट किया गया। - P5Coder


(function() {
    var ev = new $.Event('display'),
        orig = $.fn.css;
    $.fn.css = function() {
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();

$('#element').bind('display', function(e) {
    alert("display has changed to :" + $(this).attr('style') );
});

$('#element').css("display", "none")// i change the style in this line !!
$('#element').css("display", "block")// i change the style in this line !!

http://fiddle.jshell.net/prollygeek/gM8J2/3/

परिवर्तनों को सतर्क किया जाएगा।


16
2017-12-10 06:22



@ProllyGeek: कृपया मेरा जवाब देखें। सीएसएस परिवर्तनों पर कोई घटना नहीं है। - P5Coder
क्या आप यह समझा सकते हैं कि यह क्या करता है, मुझे वास्तव में यह नहीं पता कि यह प्रदर्शन के साथ कैसे काम करेगा: ब्लॉक और डिस्प्ले: कोई भी नहीं - sl133
SetInterval से बचने के लिए +1। यह एक अच्छे सवाल का एक बहुत अच्छा समाधान है। - joews
हालांकि यह विशेष रूप से सवाल का जवाब नहीं दे सकता है, यह बेहद शांत और चालाक है। :) मैंने अभी jQuery के बारे में दो नई चीजें सीखी हैं। - DanielM
मेरा मतलब था कि जब कोई मीडिया क्वेरी प्रभावी हो जाती है तो पृष्ठ पर उस तत्व को छुपाता या दिखाता है, तो अलर्ट आग नहीं लगेगा। मैंने अभी इसे स्वयं परीक्षण किया है। :) - Sam


फ़ायरफ़ॉक्स पर यह कोशिश की, काम करता है http://jsfiddle.net/Tm26Q/1/ 

$(function(){
 /** Just to mimic a blinking box on the page**/
  setInterval(function(){$("div#box").hide();},2001);
  setInterval(function(){$("div#box").show();},1000);
 /**/
});

$("div#box").on("DOMAttrModified",
function(){if($(this).is(":visible"))console.log("visible");});

अद्यतन करें

वर्तमान में उत्परिवर्तन घटनाक्रम (पसंद DOMAttrModified में प्रयोग किया जाता है   समाधान) द्वारा प्रतिस्थापित किया जाता है MutationObserver, आप इसका उपयोग कर सकते हैं   उपरोक्त मामले में डीओएम नोड परिवर्तनों का पता लगाएं।


4
2017-12-10 06:48



अच्छी तरह से किया, शायद सुपर संगत नहीं बल्कि एक अच्छा खोज - mplungjan
@ mplungjan, धन्यवाद :) - rps
यह विधि केवल फ़ायरफ़ॉक्स पर काम करती है - sl133
@ sl133, इसलिए मैंने जवाब ^ _ ^ में फ़ायरफ़ॉक्स का उल्लेख किया, वेबकिट ब्राउज़र के साथ काम नहीं करेगा - rps
मुझे एहसास हुआ कि मैंने इसे लागू करने के बाद। यह फ़ायरफ़ॉक्स पर पूरी तरह से काम करता है, बहुत बुरा यह वेबकिट पर काम नहीं करता है। - sl133


मैं बस सुधार हुआ ProllyGeekजवाब

कोई इसे उपयोगी पा सकता है। आप पहुंच सकते हैं displayChanged(event, state) घटना कब .show(), .hide() या .toggle() तत्व पर बुलाया जाता है

(function() {
  var eventDisplay = new $.Event('displayChanged'),
    origShow = $.fn.show,
    origHide = $.fn.hide;
  //
  $.fn.show = function() {
    origShow.apply(this, arguments);
    $(this).trigger(eventDisplay,['show']);
  };
  //
  $.fn.hide = function() {
    origHide.apply(this, arguments);
    $(this).trigger(eventDisplay,['hide']);
  };
  //
})();

$('#header').on('displayChanged', function(e,state) {
      console.log(state);
});

$('#header').toggle(); // .show() .hide() supported

2
2018-03-04 09:32





मुझे प्लगइन पसंद है https://github.com/hazzik/livequery यह टाइमर के बिना काम करता है!

सरल उपयोग

$('.some:visible').livequery( function(){ ... } );

लेकिन आपको एक गलती ठीक करने की जरूरत है। लाइन बदलें

$jQlq.registerPlugin('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', 'prop', 'removeProp');

सेवा मेरे

$jQlq.registerPlugin('show', 'append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', 'prop', 'removeProp');

0
2017-09-06 13:10





एक पकड़-सब jQuery कस्टम घटना इस धागे के विभिन्न लोगों द्वारा प्रस्तावित मूल तरीकों के विस्तार के आधार पर:

(function() {
    var ev = new $.Event('event.css.jquery'),
        css = $.fn.css,
        show = $.fn.show,
        hide = $.fn.hide;

    // extends css()
    $.fn.css = function() {
        css.apply(this, arguments);
        $(this).trigger(ev);
    };

    // extends show()
    $.fn.show = function() {
        show.apply(this, arguments);
        $(this).trigger(ev);
    };

    // extends hide()
    $.fn.hide = function() {
        hide.apply(this, arguments);
        $(this).trigger(ev);
    };
})();

तब एक बाहरी पुस्तकालय, जैसे sth का उपयोग करता है $('selector').css('property', value)

चूंकि हम पुस्तकालय के कोड को बदलना नहीं चाहते हैं लेकिन हम कर अपने व्यवहार को विस्तारित करना चाहते हैं हम sth पसंद करते हैं:

$('#element').on('event.css.jquery', function(e) {
    // ...more code here...
});

उदाहरण: उपयोगकर्ता लाइब्रेरी द्वारा बनाए गए पैनल पर क्लिक करता है। पुस्तकालय उपयोगकर्ता इंटरैक्शन के आधार पर तत्व दिखाता है / छुपाता है। हम एक सेंसर जोड़ना चाहते हैं जो दिखाता है कि उस बातचीत के कारण sth छुपा / दिखाया गया है और इसे बुलाया जाना चाहिए बाद पुस्तकालय का कार्य।

एक और उदाहरण: jsfiddle


0
2018-03-07 14:30