Question

我在数据库中查询表并在行中显示信息;我使用查询中的rowid作为div的ID，所以我可以使用jQuery处理每个div：

while($row_cat = $stmt->fetch(PDO::FETCH_ASSOC))
{
$rowid=$row_cat['rowid'];
$id1=$row_cat['mgap_ska_id'];
?> 
<div id="name_<?php echo $rowid; ?>" class="<?php echo ($accept == '1')?'showop':'show';?>">
<span class="namecustcoltype"><?php echo $id1;  ?></span>
<span class="decline"><a href="#" data-dropdown="#dropdown-1">HIDE THIS DIV</a></span>
</div>                
<?php
}

我正在使用jQuery bootstrap插件向我的按钮添加下拉菜单。插件信息位于：http://labs.abeautifulsite.net/jquery-dropdown/

这是下拉列表;它位于页面底部（查询外部显示问题：

<div id="dropdown-1" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
        <li><a href="#1"><span class="hidediv">Option One</span></a></li>   
        <li><a href="#2"><span class="hidediv">Option Two</span></a></li>
        <li><a href="#3"><span class="hidediv">Option Three</span></a></li>     
    </ul>

和我使用以下简单的jQuery隐藏div ...只要div选择器我知道...

<script>
$(document).ready(function(){
  $(".decline").click(function(){
  $("THIS NEEDS TO BE MY ROWID").animate({ backgroundColor: "#003" }, "slow")
  .animate({ opacity: "hide" }, "slow");
  });
});
</script>

这是我的问题：如果在以下情况下如何将动态行ID（$ rowid）传递给jQuery：

一个。下拉列表和jQuery都在WHILE之外，因此$ rowid在查询之外无效。

B中。变量HAS保持特定于每一行;我点击了特定行的下拉列表中的链接后隐藏了整行。

Answer 1

您应该添加一个类并将该类用于jQuery选择器

jQuery('.myclass').each(function () {
    var id = jQuery(this).attr('id'); // if you need the row id
    jQuery(this).animate({ backgroundColor: "#003" }, "slow"); //or whatever you wanna do

});

<强>更新正如@hakre所指出的那样，我们可以使用部分属性值匹配（＆＃34;以＆＃34开头;）但在你的情况下，你想要做的事情是这样的：

jQuery('.decline').click(function () {
    jQuery(this).parent('div').animate({ backgroundColor: "#003" }, "slow").animate({ opacity: "hide" }, "slow");
});

你把它放在每个循环之外。此代码只应出现一次。

Answer 2

利用下拉插件为show和hide提供的事件，其中dropdownData变量中包含导致下拉列表显示的原始目标。

(function($) {
    var $dropdownTrigger = $();

    $('#dropdown-1').on('show', function(event, dropdownData) {
        // Get the original element that caused the dropdown to appear
        // and set it for use later
        $dropdownTrigger = dropdownData.trigger;
    });

    $('#dropdown-1').on('hide', function(event, dropdownData) {
        // Get the original element that caused the dropdown to appear
        // and find the closest .name-container div to animate it
        $dropdownTrigger
            .closest('div.name-container')
            .animate({ backgroundColor: "#003" }, "slow")
            .animate({ opacity: "hide" }, "slow");
    });
})(jQuery);

您需要在查询循环中的div中添加name-container类：

<div id="name_<?php echo $rowid; ?>" class="name-container <?php echo ($accept == '1')?'showop':'show';?>">

使用查询之外的变量，但保持查询特定

2 个答案: