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

এটি লক্ষণীয় গুরুত্বপূর্ণ যে সংঘবদ্ধ করতে ব্যবহৃত ভেরিয়েবলটি অবশ্যই অ-সংখ্যাসূচক হতে হবে, তাই আইডি নম্বর হলে টুস্ট্রিং () করুন।

— isync

আইই 11 এটি পছন্দ করে না, $ ('#' + আইডি)। লুকান () ;, এটি বলে যে এটি অপরিজ্ঞাত।

— ওয়েলশবয়

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]();
});

আপনি কোন উপাদানটি টার্গেট করছেন এবং এইচটিএমএল এর মাধ্যমে এর কী ঘটে তা আপনি এখন পুরোপুরি নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, আপনি উপাদানগুলির সংগ্রহটি ফিড আউট করতে 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. ডেটা অ্যাট্রিবিউট হিসাবে ডিওমে নির্বাচক

   এটি আমার পছন্দের উপায় কারণ এটি আপনাকে কোডটি সত্যই শুকিয়ে দেয়

   // 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" />