1

私はjqueryを初めて使用しますが、これを行う簡単な方法は次のとおりです。

私のサーバー側のコードは、次のようにhtmlを吐き出します：

<div name="destinationName" id="1">NEW DELHI</div>  
<div name="destinationName" id="2">JAIPUR</div>

<div name="destinationContent" id="1" style=";">NEW DELHI details</div>
<div name="destinationContent" id="2" style="display:none;">JAIPUR details</div>

デフォルトでNew Delhiは、詳細を表示する必要があります。をクリックすると、代わりに詳細Jaipurが表示されます。もう一度Jaipurクリックすると、詳細のみを表示する必要があります。動作は jquery タブに似ています。New DelhiNew Delhi

Javascript :

<script type="text/javascript">
$(document).ready(function() {
    $('div[name="destinationName"]').click(function(){
        $('div[name="destinationContent"]:visible').hide();
        $('div[name="destinationContent"][id=this.id]').show();
       });
});
</script>

JSFiddle

をクリックするJaipurと、ニューデリーとジャイプールの両方がレンダリングされます。コードをデバッグすると、

$('div[name="destinationContent"][id=this.id]').show();

this.idが問題の原因です。

上記のスクリプトで this.id を参照するにはどうすればよいですか??

PS : this.id を「2」に置き換えると、正常に動作します。コンソールで、「this'id」を出力すると、「2」が返されます。したがって、これを解決する方法がわかりません。

また、似たような div をグループ化する良い方法を教えてもらえますか (名前を使って似たような div をグループ化し、id を使ってそのグループ内の要素を識別しています)。

4

4 に答える 4

2

まず、idは一意の識別子であり、同じIDを持つ複数の要素を持つことにより、jQueryで望ましくない動作が発生する可能性があります。次に、ページにHTML5 doctypeidがない限り、（有効に）数字で始めることはできません。

だからあなたが抱えている問題に...

セレクターで要素を使用するにidは、セレクター文字列の外部で要素にアクセスし、結果をセレクターの残りの部分と連結する必要があります。そうでない場合、要素は文字列の一部にすぎません。表示されているエラーは正しいので、JavaScriptは何this.idであるかを認識していないため、次の変更でエラーを修正する必要があります。

$('div[name="destinationContent"][id=' + this.id + ']').show();

idただし、これは重複の問題を修正しません。ペアごとに一意のクラス属性を使用して、をリンクすることを<div>お勧めします。

また、カスタム名の代わりにdestinationContentのclass属性を利用して、jQueryセレクターを簡単に記述できるようにすることもできます（たとえば、このjsFiddleでは、クラスセレクターに（ドット）を使用してアクセスできます）。.

詳細が常にタイトルと同じ順序である場合は、要素のインデックスを使用して、タイトルと同じdestinationContentを選択することができます。次に例を示します。

編集：要素インデックスに依存しない代替ソリューションでコードを更新しました。

HTML

<h3 class="delhi">NEW DELHI</h3>
<h3 class="jaipur" >JAIPUR</h3>
<hr/>
<div class="destinationContent">
    <div class="delhi">NEW DELHI details</div>
    <div class="jaipur">JAIPUR details</div>
</div>​​​​​​​​​​​​​​​​​​

JavaScript

$(function() {
    var contents = $('.destinationContent div');
    contents.hide();

    $('h3').on('click', function(){
        contents.hide();
        $('.destinationContent div.' + this.className).show();
    });
});​
于 2012-06-04T07:56:37.177 に答える
1

まず第一に、数値IDは良い考えではありません。

次に、divIDを次の形式で指定します：MyDiv-1MyDiv-2など

次に、ユーザー

$("[id^='MyDiv']").click(function(){ ... });

これにより、MyDivから始まるIDを持つすべてのdivでイベントがフックされます

最後に、クリック機能で

var id = $(this).attr("id").split("-")[1];

これにより、変数IDに数値IDが与えられます。これを使用して、表示するdivと非表示にするdivを決定できます

'MyContent-1'などの類似したIDをコンテンツに与えることで、さらに自動化できます。

次に、IDを「MyContent」に追加してshow（）を呼び出すだけです。

$("[id^='MyContent']").hide()
$("#MyContent-"+id).show()
于 2012-06-04T07:54:37.823 に答える
1

ページ内でIDを繰り返すことはできません。また、html4ではIDを数値にすることはできません。

DIVの最初のセットのIDをdata-属性に変更nameし、クラスにも変更します

<div class="destinationName" data-id="1">NEW DELHI</div>  
<div class="destinationName" data-id="2">JAIPUR</div>

JS

$('.destinationName').click(function(){
     /* change other "name" attributes to class */
     $('.destinationContent').hide();  
     var id= $(this).data('id');
     $('#'+id).show();
 })
于 2012-06-04T07:55:28.603 に答える
0

idを繰り返さないでください。したがって、属性を使用せず、これを作成しました。 

<script type="text/javascript">
$(document).ready(function() {
    $('div[name="destinationName"]').click(function(){
$('div[name="destinationContent"]').hide();        
$('div[name="destinationContent"]:contains('+this.innerHTML+')').show();

       });
});
</script>
于 2012-06-04T07:55:58.650 に答える