วิธีการใช้ตัวแปร JavaScript ในตัวเลือก jQuery

160

ฉันจะใช้ตัวแปร JavaScript เป็นพารามิเตอร์ในตัวเลือก 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ค่าเท่ากับชื่อขององค์ประกอบที่ถูกคลิก

javascript jquery

— user225269
แหล่งที่มา

243

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

— Vins
แหล่งที่มา

2

เป็นสิ่งสำคัญที่จะต้องทราบว่าตัวแปรที่ใช้ในการต่อข้อมูลจะต้องไม่ใช่ตัวเลขดังนั้น toString () ถ้า id เป็นตัวเลข

— isync

IE 11 ไม่ชอบสิ่งนี้ $ ('#' + id) .hide (); มันบอกว่ามันไม่ได้กำหนด

— Welshboy

55

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

ในขณะที่คุณใช้ ID นี่จะทำงานได้ดีขึ้น

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

ฉันขอแนะนำให้เฉพาะเจาะจงมากขึ้นกับวิธีการของคุณในการซ่อนองค์ประกอบผ่านการคลิกปุ่ม ฉันจะเลือกใช้คุณลักษณะข้อมูลแทน ตัวอย่างเช่น

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

จากนั้นใน JavaScript ของคุณ

// 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"ทำให้องค์ประกอบต่างๆหายไป

— ฟิล
แหล่งที่มา

14

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

ใช้งานได้กับ ID:

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

เมื่อใด (บางครั้ง)

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

ไม่ทำงานตามที่ควรจะเป็น

คุณสามารถทำได้ทั้ง:

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

— Alexx Roche
แหล่งที่มา

7

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

— อเล็กซ์อาร์
แหล่งที่มา

5

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

— morgar
แหล่งที่มา

2

เทมเพลตสตริง 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" />

ขยายตัวอย่างข้อมูล

การต่อสตริง

หากคุณต้องการใช้การสนับสนุน 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" />

ขยายตัวอย่างข้อมูล

ตัวเลือกใน DOM เป็นแอตทริบิวต์ data

นี่เป็นวิธีที่ฉันชอบเพราะมันทำให้คุณรหัสแห้งมาก

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

ขยายตัวอย่างข้อมูล

— aWebDeveloper
แหล่งที่มา