У меня есть div с классом boxcatID, который изменил HTML из скрипта jquery. Проблема в том, что на моей конкретной странице есть много таких элементов, поэтому мой сценарий, конечно, влияет на все из них, когда он должен влиять только на один.
Поэтому, чтобы исправить это, я добавил переменную catID к имени класса, например boxcatID + catID, которая выходит, например, в boxcatID1.
Теперь в моем скрипте jquery мне нужно указать конкретный div, над которым я работаю, так что это может быть boxcatID1 или даже boxcatID30. Итак, у меня есть это как JQuery:
$(".boxcatID"+catID).html( singleValues + glyphLeft);
но это выдает ошибку
Error: Syntax error, unrecognized expression: .boxcatID1;
Эти элементы создаются из цикла в моей базе данных. Таким образом, 30 записей будут означать 30 дел.
<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 -->
Проблема в том, что у вас есть трейлинг ;
в class
атрибут вашего HTML, поэтому селектор не совпадает. Вам просто нужно переместить ;
внутри блока кода PHP. Висячие '
тоже можно убрать.
Изменить это:
<div class="boxcatID<?php echo $cat_id ?>;"'>TEXT HERE</div>
к этому
<div class="boxcatID<?php echo $cat_id; ?>">TEXT HERE</div>
Еще лучше, исключить необходимость в добавочных классах, обходя DOM из элемента, вызвавшего событие, под которым запускается этот код.
Других решений пока нет …