0

私は Web 開発にかなり慣れていないので、これがこのタスクを達成するための最も効率的な方法であるかどうかはわかりません。

私は現在、オンライン ストアを書いています。製品ページには、データベース バックエンドから取得した x 個の製品があります。次に、結果配列を使用して動的な html/css を生成し、出力します。

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
    echo('
        <div class="box">
            <div class="product"><img src="upload/' . $row['prod_image'] . '" /></div>
            <h3> ' . $row['prod_title'] . '</h3>
            <div class="create-user">
                <p>More Details...</p>
            </div>
            <div class="dialog" title="Basic dialog">
                <p><img src="upload/class.png"/>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the x icon.</p>
            </div>
            <p class="price">Price: <span class="red">£' . $row['prod_price'] . '</span></p>
            <div><a href="#"></a> <a href="#"><img src="images/addtocart.gif" border="0" /></a></div>
            <div class="clearfloat"></div>
        </div>'
    );
}

「詳細」をクリックすると、「ダイアログ」タグを開くために特定の製品ごとにjQueryダイアログ関数を呼び出す必要がありますが、これは最初の製品でのみ機能し、他の製品では機能しないようです。

JS コード:

$(function() {
    $( "#dialog").dialog({
        autoOpen: false
    });
    $('#create-user').click(function() {
        $('#dialog').dialog('open');
    });
});

私はこれを回避することができましたが、それは汚い方法のように思えます。これが私がしたことです。各製品に一意の div id を追加し、インクリメントを使用して JavaScript とインラインに保ちました。

$incr = 1;
while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
    echo('
        <div class="box">   
            <div class="product"><img src="upload/' . $row['prod_image'] . '" /></div>
            <h3> ' . $row['prod_title'] . '</h3>
            <div id="create-user' . $incr . '">
                <p>More Details...</p>
            </div>
            <p class="price">Price: <span class="red">£' . $row['prod_price'] . '</span></p>
            <div><a href="#"></a> <a href="#"><img src="images/addtocart.gif" border="0" /></a></div>
            <div id="dialog' . $incr . '" title="Basic dialog">
                <p><img src="upload/class.png"/>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the x icon.</p>
            </div>
            <div class="clearfloat"></div>
        </div>'
    );
    $incr++;
}

そしてそれに付随するJS：

$(function() {
    var diag_num = 0;
    while(diag_num < 4) {
        diag_num +=1;
        $("#dialog" + diag_num ).dialog({
            autoOpen: false
        });
        $('#create-user' + diag_num).click(function() {
            $('#dialog' + diag_num).dialog('open');
        });
    }
});

この方法論はページごとに設定された数の製品でうまく機能しますが、ページごとに約 10 個しかないため (したがって、vars の長さを知っているため)、この方法で問題はありませんが、そう思わざるを得ません。これは悪い方法です。

また、「div クラス」の使用も検討し、すべての製品を同じクラスに割り当て、jQuery クラス セレクターを使用してクラス「create-user」を見つけ、「親」メソッドを使用して元に戻ります。次の「ダイアログ」クラスを見つけるための DOM ツリー。これは機能しましたが、ダイアログを開くと、ページ上の製品ごとに 1 つ開くため、「DIVS」を一意にする理由がわかりました。

それが理にかなっていることを願っています。

4

1 に答える 1

0 
$('.create-user').click(function(){
$(this).siblings('.dialog').dialog('open');
});

これは、投稿した最初のコード サンプルで動作するはずです。

クリックすると、クラスダイアログで次の項目が選択されて開きます。

ここは、$(this)クリックされた「詳細...」を表します。siblings() は sll 兄弟をフェッチします。セレクターを追加すると、指定されたセレクターでフィルター処理されます。項目をボックスでラップしたので、他のダイアログを選択しないでください。

于 2013-02-19T08:09:24.927 に答える