无法在新的 ajax 调用上更改 css

Posted 2023-02-24

【中文标题】无法在新的 ajax 调用上更改 css

【英文标题】：Unable to Change css on new ajax call

【发布时间】：2016-04-17 01:53:42

【问题描述】：

这是我的html

<div id="tabs" >
              <ul class="cat-head">
              <li>All</li>
              % for category in brandcategory %
              <li id="catcategory.id" onclick="sendBrandCategory(event, category.id)">category</li>
              % endfor %
              </ul>    
          </div>

这里是 ajax 脚本

<script type="text/javascript">
  function sendBrandCategory(event, category) 
          var data =  category : category , action:'inventory';
          $.ajax(        
              type: "GET",
              url: "% url 'storeView'  user=store.user %",
              data: data,
              success: function(data) 
                  var thumb = $(data).find('#brand');
                  $('#brand').html(thumb);  
                  $('#cat'+ category).css('background-color':'black');  
                ,
              error: function(response, error) 
                  alert(error);  
              
          );
      

</script>

在 ajax 成功时，我可以设置第一个 li 元素 css，但在单击第二个 li 元素时，第一个元素 css 仍保留在页面上。我希望一个 li 元素一次在 ajax 成功时具有背景色。如何我能做到吗？谢谢

【问题讨论】：

@UnknownUser 请解释一下如何在 sn-p 中实现 AJAX 功能？

$('#cat'+ category).css('background-color':'black'); 之前请移除所有li 元素的背景颜色。然后它会正常工作

【参考方案1】：

您需要在分配新背景之前重置最后的项目：

<script type="text/javascript">
  function sendBrandCategory(event, category) 
          var data =  category : category , action:'inventory';

          // see here:
          $('[id^="cat"]').each(function() 
               $(this).css('background-color', 'yellow'); // I put yellow but you can put the color you need
          );
          $.ajax(        
              type: "GET",
              url: "% url 'storeView'  user=store.user %",
              data: data,
              success: function(data) 
                  var thumb = $(data).find('#brand');
                  $('#brand').html(thumb);  
                  $('#cat'+ category).css('background-color':'black');  
                ,
              error: function(response, error) 
                  alert(error);  
              
          );
      

</script>

【参考方案2】：

试试这个代码：

 <script type="text/javascript">
   function sendBrandCategory(event, category) 
           var data =  category : category , action:'inventory';
           $.ajax(        
               type: "GET",
               url: "% url 'storeView'  user=store.user %",
               data: data,
               success: function(data) 
                   var thumb = $(data).find('#brand');
                   $('#brand').html(thumb);  
                   $("ul.cat-head li").css('background-color':'none');            
                   //this is new line added
                   $('#cat'+ category).css('background-color':'black');  
                ,
              error: function(response, error) 
                  alert(error);  
              
          );
      
</script>