將多個值傳遞給jQuery

我爲每個從數據庫中拉回幾行的循環構建了一個循環。它所拖動的每一行都有一個鏈接，以及一個值爲posts_id的隱藏輸入框。此鏈接將以類似於Facebook上的類似按鈕的方式工作。隱藏的輸入框只存儲了posting_id。當你點擊「like」鏈接時，它會將posting_id發送到一個jQuery頁面，然後ping一個名爲community的頁面，告訴它用戶已經「喜歡」該帖子。將多個值傳遞給jQuery

這裏的

我拉幾個行的問題，似乎只有最上面一行被拉實際上是將數據發送到jQuery的頁面，當你點擊「喜歡」按鈕。如果我點擊除頂部之外的任何其他「喜歡」按鈕，它將根本不起作用。

jQuery的頁面

$('.bump_link').click(function(){ 
    var posting_id = $('.posting_id').val();  
    $.post("community.php", { 
     posting_id: posting_id 
    }); 
    alert(posting_id); 
    $(this).toggleClass("bumped"); 
});

Foreach循環

foreach ($result as $value) { 
    $group_postings .= ' 
    <input type="text" class="posting_id" value="'.$value['posting_id'].'"> 
    <div id="bump_icon" class="bump_link"></div> 
    <span id="counter"></span> 
    '; 
}

我希望我做了明確的問題，這是和難以解釋。

來源

2013-03-27 Christian R.

這段代碼獲得張貼ID將導致一個html錯誤。你已經爲foreach循環中的元素分配了一個靜態ID。所以你最終會在你的html中有多個'bump_icon'和'counter'id。這不是處理ID的正確方法。 ID必須是您分配的元素唯一的。 – 2013-03-27 11:41:12

我剝離了很多其他人看到jist的代碼。我有id ='$ x'，$ x ++爲每行的id。 – 2013-03-27 11:50:20

你打電話給val()選擇器，你可能會返回多個元素，但val()只會給你一個（第一個）元素的值。您可以使用map()讓上課posting_id

var posting_id_values = $('.posting_id').map(function(){ 
     return this.value; 
}).get().join(',');

來源

2013-03-27 11:38:34 Adil

輸入的所有值如果你想發送點擊的按鈕只是posting_id，你可以改變你這樣的PHP/HTML代碼：

foreach ($result as $value) { 
    $group_postings .= ' 
    <div id="bump_icon" class="bump_link"> 
    <input type="text" class="posting_id" value="'.$value['posting_id'].'"> 
    </div> 
    <span id="counter"></span> 
    '; 
}

而且你的JS代碼：

$('.bump_link').click(function(){ 
    var posting_id = $(this).find('.posting_id').val();  
    $.post("community.php", { 
     posting_id: posting_id 
    }); 
    alert(posting_id); 
    $(this).toggleClass("bumped"); 
});

來源

2013-03-27 11:41:41 Uby

哈哈我看到你做了什麼！輝煌！工作很棒！ – 2013-03-27 11:45:23

當我將class =「posting_id」更改爲id「posting_id」時，它無法工作。任何想法爲什麼？ – 2013-03-27 11:52:11

我將find（'。posting_id'）更改爲find（'input [name = posting_id]'），它效果很好！ – 2013-03-27 11:54:45

你的問題是這樣的一行：

var posting_id = $('.posting_id').val();

這將每次返回第一個posting_id值，而不是與您單擊的bump_link關聯的值。

有很多方法可以解決這個問題。一種方法是使用.prev（）選擇前一個元素：

var posting_id = $(this).prev('.posting_id').val();

這將從當前div中選擇以前的posting_id元素。這取決於posts_id元素在關聯的bump_link div之前的事實。

來源

2013-03-27 11:42:05 SteveP

使用on委派的事件，因爲你是動態地添加內容和

$(this).prev('.posting_id') // to get the posting data value 

$(document).on('click','.bump_link',function(){ 
    var posting_id = $(this).prev('.posting_id').val(); //<-- use $(this) reference 
    $.post("community.php", { 
     posting_id: posting_id 
    }); 
alert(posting_id); 
$(this).toggleClass("bumped"); 
});

來源

2013-03-27 11:43:11 bipen

問題是你使用的是類來獲取posting_id，因爲所有的隱藏字段具有相同的類只有第一個元素值無論您點擊哪個按鈕都會通過。

我推薦使用這個網站，沒有隱藏的輸入，傳遞值作爲數據屬性

<div id="bump_icon" class="bump_link" data-postid="'.$value['posting_id'].'">

，並在這個js，從數據屬性

$('.bump_link').click(function(){ 
    var posting_id = $(this).data('postid'); // get the posting id from data attribute 
    $.post("community.php", { 
     posting_id: posting_id 
    }); 
    alert(posting_id); 
    $(this).toggleClass("bumped"); 
});

來源

2013-03-27 11:47:02

不錯的HTML5解決方案:) – Uby 2013-03-27 11:48:28

+1不錯的ellobarative答案 – 2013-03-27 11:53:20

將多個值傳遞給jQuery

回答

相關問題