與jQuery使用動態div ID

我有一個容器是充滿了最大。 20個項目，每個項目從SQL數據庫和ID爲suit_(1-20)的自己的div獲取其信息（如圖像）。與jQuery使用動態div ID

的項目將列在下面的代碼：

<?php 
    $d = 1; 
?> 
<table > 
    <tbody> 
    <?php while $item = sqlsrv_fetch_object($user_item) : ?> 
     <td align="center" height="50" width="21%"> 
      <div class="tooltips" href=""> 
       <div class="suitable" id="suit_<?php echo $d++ ?>" name="<?php echo $myDBID ?>"> 
        <img src="images/icon/<?php echo $item->Img ?>"> 
       </div> 
      </div> 
     </td> 
    <?php endwhile; ?> 
    </tbody> 
</table>

正如你看到的每一個DIV的ID爲suit_(d++)這意味着爲1-20最多20個項目。這些div有一個jQuery腳本來觸發右擊上下文菜單事件：

$(function() { 
    var count; 
    for(count = 1; count < 21; count++) { 
     var ID = document.getElementById('suit_' + count).getAttribute('id'); 
     $('#suit_' + count).contextPopup({ 
      items : [{ 
       label : 'Set', 
       action : function() { 
        window.location.href = "?settest=" + ID 
       } 
      }, 
      null, 
      { 
       label : 'Throw', 
       action : function() { 
        window.location.href = "?throwtest=" + ID 
       } 
      }, 
      ] 
     }); 
    } 
});

我有一個for循環應該從1數到20，並生成相應的IDS（suit_1到suit_20）。

不知怎的，腳本只適用於容器中的最後一個項目，所以如果我有10個項目，所有項目將得到ID suit_10。

任何想法？

來源

2016-01-26 eastclintwood

爲什麼不刪除循環，並使用starts with attribute selector？

使用^=選擇說「任何開頭」：

// A bit "safer" document ready, won't collide with other libraries that use $ 
jQuery(function($) { 
    // Select all items with ID starting with "suit_" 
    $('[id^="suit_"]').contextPopup({ 
     items : [{ 
      label : 'Set', 
      action : function() { 
       window.location.href = "?settest=" + $(this).attr('id'); 
      } 
     }, 
     null, 
     { 
      label : 'Throw', 
      action : function() { 
       window.location.href = "?throwtest=" + $(this).attr('id'); 
      } 
     }, 
     ] 
    }); 
});

來源

2016-01-26 17:32:49

這實際上是相當不錯的，並會在進一步的項目有幫助的，可悲的是整個下拉停止工作，如果我用這個選擇。我也試過$（div'[id^=「suit_」]'）就像剛纔提到的網站上提到的那樣，問題依然存在。 – eastclintwood

我注意到現在選擇器就像一個魅力，實際的問題是「var ID = $（this）.attr（'id'）;」裏面的事件處理程序。如果我刪除它的下拉菜單工作正常，但外面我有像以前一樣的問題。 – eastclintwood

啊，我看到了這個問題。支持。 –

我加入了一個選擇和each(function())設置變量object在活動開始前解決這個問題。

與以前的解決方案的問題是孩子的功能

action : function() { 
    window.location.href = "?settest=" + ID 
}

造成該$(this)不能正常工作。

請參見下面的完整代碼：

jQuery(function($) { 
    $('[id^="suit_"]').each(function(){ 
    var object = this; 
    $(object).contextPopup({ 
     items : [{ 
      label : 'Set', 
      action : function() { 
       window.location.href = "?settest=" + object.id 
      } 
     }, 
     null, 
     { 
      label : 'Throw', 
      action : function() { 
       window.location.href = "?throwtest=" + object.id 
      } 
     }, 
     ] 
    }); 
    }); 
});

來源

2016-01-26 19:41:24 eastclintwood

與jQuery使用動態div ID

回答

相關問題