JQuery चयनकर्ताओं में जावास्क्रिप्ट चर का उपयोग कैसे करें?

Question

मैं jQuery चयनकर्ता में एक पैरामीटर के रूप में जावास्क्रिप्ट चर का उपयोग कैसे करूं?

<script type="text/javascript">
$(function(){    
  $("input").click(function(){
    var x = $(this).attr("name");

    $("input[id=x]").hide();    
  });    
});
</script>

<input type="text" id="bx"/><input type="button" name="bx"/>
<input type="text" id="by"/><input type="button" name="by"/>

मूल रूप से मैं जो करना चाहता हूं वह उस तत्व को छिपाने में सक्षम होना है जो idकि उस तत्व के नाम के बराबर है जिसे क्लिक किया जा रहा है।

Answer 1

var name = this.name;
$("input[name=" + name + "]").hide();

या आप ऐसा कुछ कर सकते हैं।

var id = this.id;
$('#' + id).hide();

या आप कुछ प्रभाव भी दे सकते हैं।

$("#" + this.id).slideUp();

यदि आप संपूर्ण तत्व को स्थायी रूप से निकालना चाहते हैं तो पृष्ठ बनाएँ।

$("#" + this.id).remove();

इसमें भी आप इसका इस्तेमाल कर सकते हैं।

$("#" + this.id).slideUp('slow', function (){
    $("#" + this.id).remove();
});

Comments

यह ध्यान रखना महत्वपूर्ण है कि समतल करने के लिए उपयोग किया जाने वाला चर गैर-संख्यात्मक होना चाहिए, इसलिए यदि आईडी एक संख्या है, तो स्ट्रींग () करें।

— .ync

IE 11 को यह पसंद नहीं है, $ ('#' + id) .hide ();, यह कहता है कि यह अपरिभाषित है।

— वेल्शबॉय

Answer 2

$(`input[id="${this.name}"]`).hide();

जैसा कि आप एक आईडी का उपयोग कर रहे हैं, यह बेहतर प्रदर्शन करेगा

$(`#${this.name}`).hide();

---

मैं अत्यधिक बटन क्लिक के माध्यम से तत्वों को छिपाने के लिए आपके दृष्टिकोण के साथ अधिक विशिष्ट होने की सलाह देता हूं। मैं इसके बजाय डेटा-विशेषताओं का उपयोग करने का विकल्प चुनूंगा। उदाहरण के लिए

<input id="bx" type="text">
<button type="button" data-target="#bx" data-method="hide">Hide some input</button>

फिर, अपने जावास्क्रिप्ट में

// using event delegation so no need to wrap it in .ready()
$(document).on('click', 'button[data-target]', function() {
    var $this = $(this),
        target = $($this.data('target')),
        method = $this.data('method') || 'hide';
    target[method]();
});

अब आप पूरी तरह से नियंत्रित कर सकते हैं कि आप किस तत्व को लक्षित कर रहे हैं और HTML के माध्यम से इसका क्या होता है। उदाहरण के लिए, आप तत्वों के संग्रह को उपयोग data-target=".some-class"और data-method="fadeOut"फीका कर सकते हैं ।

Answer 3

$("input").click(function(){
        var name = $(this).attr("name");
        $('input[name="' + name + '"]').hide();    
    });   

आईडी के साथ भी काम करता है:

var id = $(this).attr("id");
$('input[id="' + id + '"]').hide();

कभी कब)

$('input#' + id).hide();

काम नहीं करता है, जैसा कि यह होना चाहिए ।

आप दोनों भी कर सकते हैं:

$('input[name="' + name + '"][id="' + id + '"]').hide();

Answer 4

var x = $(this).attr("name");
$("#" + x).hide();

Answer 5

$("#" + $(this).attr("name")).hide();

Answer 6

1. ES6 स्ट्रिंग टेम्पलेट

   यहाँ एक आसान तरीका है अगर आपको IE / EDGE समर्थन की आवश्यकता नहीं है

   $(`input[id=${x}]`).hide();

   या

   $(`input[id=${$(this).attr("name")}]`).hide();

   यह एक es6 फीचर है जिसे टेम्पलेट स्ट्रिंग कहा जाता है

       (function($) {
           $("input[type=button]").click(function() {
               var x = $(this).attr("name");
               $(`input[id=${x}]`).toggle(); //use hide instead of toggle
           });
       })(jQuery);

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <input type="text" id="bx" />
       <input type="button" name="bx" value="1" />
       <input type="text" id="by" />
       <input type="button" name="by" value="2" />
   
    

---

2. स्ट्रिंग कॉनटेनटेशन

   यदि आपको IE / EDGE समर्थन उपयोग की आवश्यकता है

   $("#" + $(this).attr("name")).hide();

       (function($) {
           $("input[type=button]").click(function() {
               $("#" + $(this).attr("name")).toggle(); //use hide instead of toggle
           });
       })(jQuery);

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <input type="text" id="bx" />
       <input type="button" name="bx" value="1" />
       <input type="text" id="by" />
       <input type="button" name="by" value="2" />
   
    

---

3. DOM में चयनकर्ता डेटा विशेषता के रूप में

   यह मेरा पसंदीदा तरीका है क्योंकि यह आपको वास्तव में DRY कोड बनाता है

   // HTML
   <input type="text"   id="bx" />
   <input type="button" data-input-sel="#bx" value="1" class="js-hide-onclick"/>
   
   //JS
   $($(this).data("input-sel")).hide();

       (function($) {
           $(".js-hide-onclick").click(function() {
               $($(this).data("input-sel")).toggle(); //use hide instead of toggle
           });
       })(jQuery);

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <input type="text" id="bx" />
       <input type="button" data-input-sel="#bx" value="1" class="js-hide-onclick" />
       <input type="text" id="by" />
       <input type="button" data-input-sel="#by" value="2" class="js-hide-onclick" />