2

文字のリストを表示し、ユーザーが選択した内容に応じて適切なページをロードするメニューを作成しています。1つの文字を読み込むことはできますが、「文字」をIDとして使用して、文字ごとに同じjqueryコードを複製する必要がないようにするにはどうすればよいですか。

<div id="idshow"><a id="hidelinks" href="#">Hide</a> <br /><br /></div>

<div id="letter_a"><a id="success_a" href="#">A Show</a></div>
<div id="letter_b"><a id="success_b" href="#">B Show</a></div>
<div id="letter_c"><a id="success_c" href="#">C Show</a></div>

<div id="loadpage"></div>


<script>
$("#idshow").hide();

$("#success_a").click(function () {

        $("#idshow").show();
        $("#letter").hide();


        $("#loadpage").load("letter_a.html", function(response, status, xhr) {
                if (status == "error") {var msg = "Sorry but there was an error: ";$("#error").html(msg + xhr.status + " " + xhr.statusText);}});
        });

        $('#hidelinks').click(function() {
                $('#letter_content').slideUp();
                $("#idshow").hide();
                $("#letter").show();
});

</script>
4

7 に答える 7

5

あなたはこれを使うことができます：

 $('[id^="success"]').click(function () {
     // the letter is the last character of the id
     var letter = this.id.slice(-1); 
     ...
     $("#loadpage").load("letter_"+letter+".html" ...
于 2012-11-29T18:59:32.357 に答える
1

これは、データ属性を使用して私が行うことです。

<div id="letters">
    <div><a data-letter="a" href="#">A Show</a></div>
    <div><a data-letter="b" href="#">B Show</a></div>
    <div><a data-letter="c" href="#">C Show</a></div>
</div>

JS：

$('.letters').on('click','a[data-letter]',function() {
    var selectedLetter = $(this).data('letter');
    //rest of code here
});

varで選択したletetrにアクセスできますselectedLetter。これは、他のいくつかのソリューションよりも効率的です。これは、1文字ごとに個別のイベントハンドラーではなく、1つのイベントハンドラーのみをアタッチするためです。

于 2012-11-29T19:09:37.320 に答える
0

それぞれにスタイリングのないクラスを与えます。

<div id="letter_a"><a id="success_a" class="letters" href="#">A Show</a></div>
<div id="letter_b"><a id="success_b" class="letters" href="#">B Show</a></div>
<div id="letter_c"><a id="success_c" class="letters" href="#">C Show</a></div>

$('.letter').click(function(event) {
   // ...
});
于 2012-11-29T19:01:28.750 に答える
0

クラスを追加し、データ属性を追加し、コンテナからすべての子を選択します...。

文字列で始まるすべてのIDを選択するだけでは不可能です。 IDの一部を選択するだけでも可能です。dystroyの答えを参照してください。

コード：

$('[id^="success"]').each(function() {
    debugger;
    $('body').append($(this).text());
    });​

フィドルのサンプル： http： //jsfiddle.net/TwDmm/2/

于 2012-11-29T19:01:32.137 に答える
0

クラスとして文字を使用することをお勧めします。

その後、選択を行うことができます

$(".letters").click(function(){
   // You then access the clicked object via $(this).

});
于 2012-11-29T19:02:15.647 に答える
0

文字にクラス（たとえば.letter）を与えることが解決策かもしれません。.letterを非表示にすることですべての文字を非表示にし、そのIDを具体的にターゲットにして1つを表示することができます。したがって、関数は次のようになります。$('.letter').click(function(){});

于 2012-11-29T19:00:36.097 に答える
0

私はこれがあなたが探しているものだと信じています（アラート（...）の部分を除いて、それはショーのためだけです）：

$("#idshow").hide();

$(".letterLink").click(function () {

        $("#idshow").show();
        $("#letter").hide();

var url = $(this).attr('id') + ".html";
 alert("loading " + url);   

        $("#loadpage").load(url, function(response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }});
        $('#hidelinks').click(function() {
                $('#letter_content').slideUp();
                $("#idshow").hide();
                $("#letter").show();
        });
});

これがフィドルです

​
于 2012-11-29T19:07:26.167 に答える