php - 如何获取动态的id标签并在单击时更改其背景颜色？

Question

以下是代码

 foreach($this->categoryResult as $CatResult)
    {
        echo "<div id=".$CatResult['id']." onclick='$(this).css('background-color','#1adec9')'><p id=".$CatResult['id']." class='CatgrySelect' onClick='load_subcategory(".$CatResult['id'].")'>".$CatResult['description']." > </p></div>";
        echo "<input type='hidden' class='CatID' name='CatID' value=".$CatResult['id'].">";
        //echo $CatResult['id'];
    }

Answer 1

有一个概念叫做Unobtrusive Javascript。

$(document).on('click', 'p.CatgrySelect', function(eV) {
     var pItem = $(this);
     var divItem = $(this).parents("div:first");

     pItem.css({"background-color":"#abc"});
     divItem.css({"background-color":"#cba"});
});

如果您可以引用包含此动态 DOM 元素的任何其他父 DOM 元素，则可以document在事件侦听器上替换它。

Answer 2

 foreach($this->categoryResult as $CatResult)
 {
   echo "<div id='".$CatResult['id']."'><p id='".$CatResult['id']."' class='CatgrySelect'>".$CatResult['description']."</p></div>";
    echo "<input type='hidden' class='CatID' name='CatID' value='".$CatResult['id']."'>";
    //echo $CatResult['id'];
 }

 $(".CatgrySelect").click(function(){
   $(this).parent().css('background-color','#1adec9');
 });

Answer 3

尝试这个：

echo "<div id=".$CatResult['id']." onclick='$(this).css(\'background-color\',\'#1adec9\')'>

在引号之类的内容之前添加“\”一般告诉文本解析器您希望避免在该点拆分字符串

Answer 4

尝试这个：

foreach($this->categoryResult as $CatResult)
{
     echo "<div id='".$CatResult['id']."'><p id='".$CatResult['id']."' class='CatgrySelect'>".$CatResult['description']."</p></div>";
     echo "<input type='hidden' class='CatID' name='CatID' value='".$CatResult['id']."'>";
    //echo $CatResult['id'];
}

试试这个 jquery/javascript：

$(".CatgrySelect").live('click',(function(){
     $(this).parent().css('background-color','#1adec9');
});

Answer 5

看起来你有两个同名的 IDS.. 那是无效的.. ID 应该始终是唯一的

尝试这个

foreach($this->categoryResult as $CatResult)
{
    echo "<div><p id=".$CatResult['id']." class='CatgrySelect' >".$CatResult['description']." > </p></div>";
    echo "<input type='hidden' class='CatID' name='CatID' value=".$CatResult['id'].">";
    //echo $CatResult['id'];
}

javascript

 $('document').on('click', 'p.CatgrySelect', function() {
   var p = $(this);
   var div = p.parent();

   p.css({"background-color":"#abc"});
   div.css({"background-color":"#cba"});
});