如何使用变量解决 Jquery 选择器

Question

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

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

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

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

但这会引发错误

 Error: Syntax error, unrecognized expression: .boxcatID1;

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

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

那么，如果我想更改此处的文本，我该如何解决我正在处理的这首单曲 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 来消除对增量类的需求。

如何使用变量解决 Jquery 选择器

How to address Jquery Selector with Variable

php

variables

jquery

jquery-selectors