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

Question

我有一个带有 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 -->

Answer 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 来消除对增量类的需求。