Jqueryが取得した値を別のIDに渡す

Question

これはJqueryを使用した最初の日です。私はクリックされた要素からIDを取得し、そのIDを別の要素に渡したいと考えています。これまでのところ、私のコードによればidの取り出しはうまくいきますが、別の要素に渡すことができません！私は間違っています。
ここにコードがあります。

$(function() { 
    $(".prs").click(function(e) { 
     e.preventDefault(); 
     var x= $(this).get(0).id); 
     $("span #x").slideToggle("slow"); 
    }); 
}); 

最後のコード行のように、取得したidをspanのidに渡したいとします。

Answer 1

これはjQueryとは何の関係もなく、JavaScriptの問題です。文字列と変数を連結する必要があります。試してみてください：

$(function() { 
    $(".prs").click(function(e) { 
     e.preventDefault(); 
     var x= $(this).get(0).id); 
     $("span #" + x).slideToggle("slow"); 
    }); 
}); 

ただし、ちょっとしたメモです。 idを取得するためにjQueryは必要ありません。単純に次のようにJavaScriptを使用します。

var x= this.id; 

だからあなたのコードは次のように簡略化することができます。

$(function() { 
    $(".prs").click(function(e) { 
     e.preventDefault(); 
     $("span #" + this.id).slideToggle("slow"); 
    }); 
}); 

は最後に、それは同じidを持つ2つのアイテムを持っているために、有効なHTMLのidについてだけコメントはありません。つまり、クリック可能な要素にはmy_object、スパンにはmy_oject_boxと言いますと、それぞれに異なるIDを与える必要があります。その後、コードは

$(function() { 
    $(".prs").click(function(e) { 
     e.preventDefault(); 
     $("#" + this.id + "_box").slideToggle("slow"); 
    }); 
}); 

Answer 2

となります。

$(function() { 
    $(".prs").click(function(e) { 
     e.preventDefault(); 
     var x= $(this).attr('id'); 
     $("span #" + x).slideToggle("slow"); 
    }); 
}); 

Answer 3

var x= $(this).get(0).id; 
$("span#"+x).slideToggle("slow") 

$（ "スパン＃" + x）が同じスパンに $にアクセスすることである（ "スパン＃" + x）がスパン内そのIDを持つ要素にアクセスすることであるが、私はそれだと思います同じidを持つ2つの要素を持つのは良い方法ではありません。私はあなたが同じ要素の上にスライドアニメーションをトリガしていることがわかります。コードから

Answer 4

（IDは、ページ内で一意であり、同じID要素に存在することはできませんので）あなたがそうクリックしたとして、あなたはこのように行うことができます。

あなたがターゲットとしてそれを持っているデータの属性を使用することができ、他の要素からスライドをトリガするために

$(document).ready(function() { 
 
    $(function() { 
 
    $(".prs").click(function() { 
 
     $(this).slideToggle("slow"); 
 
    }); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="id-1" class="prs">ID-1</div> 
 
<div id="id-2" class="prs">ID-2</div>

---

（= $.data('target')data-target="..."

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    var target = $(this).data('target'); 
 
    $(target).slideToggle('slow'); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="id-1">ID-1</div> 
 
<div id="id-2">ID-2</div> 
 
<hr/> 
 
<button data-target="#id-1">Turn on/off #1</button> 
 
<button data-target="#id-2">Turn on/off #2</button>