1

誰かが私を助けてくれるのだろうか。私は jQuery にかなり慣れていませんが、それを学ぶのが大好きです。少し問題があるようです。誰かが私を助けてくれるのだろうか。次のjQueryを使用して、ユーザーIDとプロパティIDをMySQLに追加しています(「お気に入りに追加」のように)。関数は最初のプロパティで正常に実行されますが、その下の他のプロパティでは実行されません。

Jクエリ 

$(document).ready(function(){
$("#clickme").delegate("#insert", "click", function(){

var ruid=$("#ruid").val();
var propid=$("#propid").val();


$.post('inc.saveprop.php', {ruid: ruid, propid: propid},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>

HTML：以下はループ中です

<? while { 
<input id=\"ruid\" type=\"hidden\" value=\"".$uid."\" />
<input id=\"propid\"  type=\"hidden\" value=\"".$props['propid']."\" />
<a class=\"insert\" title=\"Insert Data\" href=\"#\">Save to Favourites</a>
 <!-- For displaying a message -->

<div id=\"message\"></div>";
} etc  ?>

スクリプトはループ内の最初のアイテムに対しては機能しますが、他のアイテムに対しては機能しません。問題の 1 つは、同じ ID を持つ複数の非表示の型 (ループ内) があることです。大したことではありませんが、コードを変更して id=name+ID にアクセスするか、Class= または Name を使用するかはわかりません。 =代わりに。

誰かが私を助けてくれたら本当にありがたいです（さまざまなことを何時間もグーグルで試して、4回壊れましたha）

読んでくれてありがとう

4

3 に答える 3

2

1つの問題は、2つのIDを保存して、AJAX呼び出しでサーバーに渡すことができるようにする必要があることです。これを行う1つの方法は、jqueryのdata（）コマンドを使用することです。これにより、特定のHTML要素に関連付けられたKey-Valueデータの読み取り/書き込みが可能になります。この場合、2つのIDを<a>...</a>要素に直接格納できます。 

<a class="insert" title="Insert Data" data-ruid="ruid1" data-propid="propid1" href="#">Save to Favourites</a>

解決する必要のあるもう1つの問題は、これらすべてに一意の名前を付けることなく、これらの「お気に入りに保存」リンクを任意の数にする方法です。これは、クラスとjqueryクラスセレクターを使用して実現されます。

HTMLの例：

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid1" data-propid="propid1" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid2" data-propid="propid2" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid3" data-propid="propid3" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

JavaScriptの例：

$(document).ready(function(){
    $(".clickme").delegate(".insert", "click", function(){
        // the 'this' variable refers to whatever was clicked, in this case 
        // it is the <a> ... </a> element with the class 'insert'

        // use the jquery data() command to retrieve the saved IDs         
        var ruid=$(this).data('ruid');
        var propid=$(this).data('propid');

        var data = "ruid: " + ruid + " propid: " +  propid;

        // find the sibling of the <a> ... </a> element that has the class 'message'
        // and update it with the retrieved information
        var message = $(this).siblings(".message");

        message.html(data);
        message.hide();
        message.fadeIn(1500);

        //$.post('inc.saveprop.php', {ruid: ruid, propid: propid}, function(data){
        //    $("#message").html(data);
        //    $("#message").hide();
        //    $("#message").fadeIn(1500); //Fade in the data given by the insert.php file
        //});

        return false;
    });
});

この例のjsfiddle：http: //jsfiddle.net/wQjhN/7/

于 2012-12-05T20:46:11.050 に答える
2

セレクターで ID を使用しています:

$("#clickme")

ID は一意であり、jQuery はその特定の ID のすべてではなく、最初のインスタンスのみを取得します。

クラスを使用するには、ループを少し変更する必要があります。

<input class=\"ruid\" type=\"hidden\" value=\"".$uid."\" />

代わりにセレクターでクラスを使用します。

$(".clickme")

on()代わりにに進むことも良い考えですdelegate()

$("#insert").on("click", ".clickme", function(){ ... }
于 2012-12-05T19:59:39.797 に答える
0

要するに、HTML 生成を修正し、繰り返される類似の要素にはクラスを使用し、一意の要素には ID を使用します。

クリック ハンドラーは、同じ ID を持つ複数のアイテムにアタッチすることはありません。

@adeneo の修正を使用して対処できますが、その後、ruid と propid で同様の問題が発生し、それらの値を正しく読み取ることができなくなります。ruid の最初のインスタンスが再び取得され、クラスではなくIDを使用しているため、ページのpropid。

いくつかのハックなセレクターを思いつくことができますが、おそらく入力要素または何かをループします。たとえば$(this).find('input')、最初がruidで、2番目がpropidであると仮定してループします。これはハックであり、せいぜい壊れやすいものです。HTML の順序が変わると、すべてが壊れてしまいます。

HTML を修正すると、適切なセレクターを使用できるようになります (おそらく$(this).find('.ruid')、または同様のもの)。

于 2012-12-05T20:10:02.180 に答える