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

【问题标题】：Unable to Change css on new ajax call无法在新的 ajax 调用上更改 css
【发布时间】：2016-04-17 01:53:42
【问题描述】：

这是我的html

<div id="tabs" >
              <ul class="cat-head">
              <li>All</li>
              {% for category in brandcategory %}
              <li id="cat{{category.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 元素的背景颜色。然后它会正常工作

标签： jquery html css ajax django

【解决方案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>

【讨论】：