4

いくつかの埋め込みコードを表示するために作成した jQuery のモーダル ボックスがあります。クリックされたリンクのスクリプトを取得したいのですが、idこれを機能させることができないようです。

どうすればそれができるのか、なぜこれが起こっているのか誰か知っていますか?

私のjQueryコードは次のとおりです。

function generateCode() {
    var answerid = $('.openembed').attr('id');
    if($('#embed input[name="comments"]:checked').length > 0 == true) {
        var comments = "&comments=1";
    } else {
        var comments = "";
    }
    $("#embedcode").html('<code>&lt;iframe src="embed.php?answerid=' + answerid + comments + '" width="550" height="' + $('#embed input[name="size"]').val() + '" frameborder="0"&gt;&lt;/iframe&gt;</code>');
}

$(document).ready(function () {
    $('.openembed').click(function () {
        generateCode();
        var answerid = $('.openembed').attr('id');
        $('#box').show();
        return false;
    });
    $('#embed').click(function (e) {
        e.stopPropagation()
    });
    $(document).click(function () {
        $('#box').hide()
    });
});

私のマークアップは次のとおりです。

<a href="#" id="7830" class="openembed">Embed</a>
<a href="#" id="9999" class="openembed">Embed</a>
4

6 に答える 6

12

あなたの問題はここにあります：

$('.openembed')

一致した要素の配列を返します。代わりに、クリックされた要素のみを選択する必要があります。 このクラスを持つすべての要素にイベントを$('.openembed')割り当てると、正しく機能します。clickしかし一方で、どちらがクリックされたのかを知ることはできません。

しかし幸いなことに、ハンドラー関数の本体で click を呼び出すことができます$(this)。

$(this)現在の（およびクリックされた要素）を返します。

// var answerid = $('.openembed').attr('id'); // Wrong
var answerid = $(this).attr('id');   // Correct
// Now you can call generateCode
generateCode(answerid);

別のエラーは、generateCode関数の本体です。ここでは、選択した要素の ID を渡す必要があります。これは正しい実装です。

function generateCode(answerid) {
    if($('#embed input[name="comments"]:checked').length > 0 == true) {
        var comments = "&comments=1";
    } else {
         var comments = "";
    }
    $("#embedcode").html('<iframe src="embed.php?answerid=' + answerid + comments + '" width="550" height="' + $('#embed input[name="size"]').val() + '"frameborder="0"></iframe>');
}

ここで、正しい動作でコードを実装しました: http://jsfiddle.net/pSZZF/2/

于 2012-12-10T21:56:04.237 に答える
5

Instead of referencing the class, which will grab all members of that class, you need to reference $(this) so you can get that unique link when it is clicked.

var answerid = $(this).prop('id');
于 2012-12-10T21:54:32.940 に答える
4 
 $('.openembed').click(function () {
    generateCode();
    var answerid = $(this).attr('id');
    $('#box').show();
    return false;
});

$(this) を使用します。$('.openembed') は複数のリンクを参照しています。

于 2012-12-10T21:53:41.167 に答える
0

他の回答は click() 関数を修正しようとしていますが、実際の問題は generateCode 関数にあります。

クリックした要素を generateCode 関数に渡す必要があります。

$('.openembed').click(function () {
    generateCode(this);

そして、generateCode を変更します。

function generateCode(element) {
    var answerid = element.id;

もちろんvar answerid = $('.openembed').attr('id');、クリックコード内も正しくありませんが、とにかく何もしていないようです。

于 2012-12-10T22:09:32.767 に答える
0 
var answerid = $('.openembed').attr('id');

する必要があります

var answerid = $(this).prop('id');
于 2012-12-10T21:53:46.547 に答える
0

正しいアンカーがクリックされたときに ID を取得し、それを generateCode 関数に渡します

$('.openembed').click(function () {
    var answerid = $(this).attr('id');
    generateCode(answerid)

    $('#box').show();
    return false;
});

機能を変更する

function generateCode(answerid) {
  // dont need this line anymore
  // var answerid = $('.openembed').attr('id');
于 2012-12-10T22:04:10.753 に答える