Question

当jquery在CSS上触发时，我正在使用onchange event删除/添加dropdown。当onchange触发时，CSS将被删除并且从不添加。我的代码如下。如果我的代码有任何问题，请告诉我。

(function ($) {
$("select#edit-panes-delivery-select-address").change(function() {
    $('div#uc-address-panes-delivery-zone- 
 wrapper').removeAttr('top','');
    $("div#uc-address-panes-delivery-zone-wrapper").attr('top', 
 '547px');
 });
}(jQuery));

Answer 1

使用.css（）更改CSS

$（element）.css（'attribute'，'value'）;

$("div#uc-address-panes-delivery-zone-wrapper").css('top', '547px');

Answer 2

有关如何执行此操作的小示例，请使用css()添加任何样式。

$(document).ready(function(){
    var jsonResult =  JSON.parse('[{"value":"no","name":"No Selection"},{"value":"red","name":"Red"},{"value":"blue","name":"Blue"}]')
    var options ='';
    for(let i = 0 ; i <jsonResult.length; i++){
        options +=  '<option value="'+jsonResult[i].value+'">'+jsonResult[i].name+'</option>';
    }
    $('#changer').empty().append(options);
});


$('#changer').change(function(){
  var value =  $(this).val();
  switch(value){
    case 'red': 
      $('#bulb').css('background-color','#ff0000')
      break;
    case 'blue': 
      $('#bulb').css('background-color','#0000ff')
      break;
    default: 
      $('#bulb').css('background-color','#ccc'); 
      break;  
  }
})

#bulb{
width:50px;
height:50px;
background-color:#ccc;
border-radius:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bulb"></div>

<select id="changer"></select>

Answer 3

    $("div#uc-address-panes-delivery-zone-wrapper").addClass("top");
    or remove class 
    $("div#uc-address-panes-delivery-zone-wrapper").removeClass("top");

 in style
.top {
top: 547px;
}

 or 
    $("div#uc-address-panes-delivery-zone-wrapper").css("top","547px");

如何使用jQuery删除/添加CSS？

3 个答案: