如何使用变量处理 Jquery 选择器

Posted 2023-03-05

【中文标题】如何使用变量处理 Jquery 选择器

【英文标题】：How to address Jquery Selector with Variable

【发布时间】：2016-04-26 06:01:26

【问题描述】：

我有一个带有 boxcatID 类的 div，它的 html 从 jquery 脚本更改。问题是我的特定页面有很多这样的 div，所以我的脚本当然会影响所有这些 div，而它应该只影响一个。

所以为了解决这个问题，我在类名中添加了一个 catID 变量，例如 boxcatID + catID，例如 boxcatID1。

现在在我的 jquery 脚本中，我需要处理我正在处理的特定 div，因此它可能是 boxcatID1 甚至是 boxcatID30。所以我有这个作为jquery：

 $(".boxcatID"+catID).html( singleValues + glyphLeft); 

但这会引发错误

 Error: Syntax error, unrecognized expression: .boxcatID1;

这些 div 是从我的数据库中的循环创建的。所以 30 条记录意味着 30 个 div。

 <div class="boxcatID<?php echo $cat_id; ?>">TEXT HERE</div>

那么，如果我想在此处更改 TEXT，我该如何处理我正在处理的单个 div？

这是原始代码：

glyphLeft = '<span class="glyphicon glyphicon-user" data-unicode="e008"></span>';
            function displayValsL() 

                catID = dp(this).attr("catID");
                console.log("catID is " + catID);
                var singleValues = dp( "select.selectbox-listL" ).val();
                var boxcat = '#boxcatID'+catID;

                dp("#boxcatID"+catID).html( singleValues + glyphLeft);
                var pic = "images/players/" + dp('option:selected' , this).attr("id") + ".png";
                dp(".img-left").attr("src", pic);
                nameValue1 = dp('option:selected' , this).val();
                enableButton();
            
            dp( "select.selectbox-listL" ).change( displayValsL );

PHP

<div class="selectbox-wrapper left">
                    <div class="selectboxTopL" id="boxcatID<?php echo $cat_id; ?>" catID='<?php echo $cat_id; ?>'>
                        Player 1 <span class="glyphicon glyphicon-user" data-unicode="e008"></span>
                    </div> <!-- END selectboxTop -->
                    <select  class="selectbox-listL" catID='<?php echo $cat_id; ?>' size="6">

                        <?php
                            $query2 = "SELECT first_name,last_name, playerID, categoryID FROM Players WHERE categoryID = '$cat_id' ORDER BY last_name";
                            $result2 = mysqli_query($conn, $query2);

                            if($result2 === FALSE)  
                                die(mysql_error()); // TODO: better error handling
                            

                            //fetch tha data from the database
                            while ($row2 = mysqli_fetch_array($result2)) 

                                $playerID = $row2['playerID'];
                                $playerFN = $row2['first_name'];
                                $playerLN = $row2['last_name'];
                                $playerCatID = $row2['categoryID'];

                                echo '<option id="'. $playerFN . $playerLN .'" value="' . $playerFN ." ". $playerLN . '">' . $playerFN . " " . $playerLN . '</option>';
                            
                        ?>
                    </select>
                </div><!-- END selectbox-wrapper -->

【问题讨论】：

尝试提醒（catID）并检查显示的数据

每个 div 的 catID 都是正确的。它甚至在 FireBug 中显示正确。

您还可以在错误消息中看到 jquery 收到了正确的 div .boxcatID1 其中“1”是变量 catID

【参考方案1】：

问题是因为您的 HTML 的 class 属性中有一个尾随 ;，因此选择器不匹配。您只需在 PHP 代码块中移动 ;。悬挂的'也可以去掉。

改变这个：

<div class="boxcatID<?php echo $cat_id ?>;"'>TEXT HERE</div>

到这里

<div class="boxcatID<?php echo $cat_id; ?>">TEXT HERE</div>

更好的是，通过从引发此代码运行的事件的元素遍历 DOM 来消除对增量类的需求。

【讨论】：

这确实解决了错误，但没有解决问题。例如，当我使用 div boxcatID20 执行操作时，它会对 boxcatID1 进行更改。如果我正在使用 boxcatID1，那么这就是应该更改的全部内容。

在这种情况下，您的 JS catID 变量不包含您期望的值。用你展示的小代码是不可能调试的。如果您可以添加更完整的示例，我们可能会提供帮助。

“更好的是，通过从引发此代码运行的事件的元素遍历 DOM 来消除对增量类的需求。”嗯？

如果我能摆脱增量，那就太好了！

如果你能展示更多的 HTML 和 CSS，我可以告诉你怎么做。