使用 jquery 在 chrome 上浮点更改问题

Float change issue on chrome with jquery

本文关键字：问题 jquery chrome 使用      更新时间：2023-09-26

我正在尝试在IE和Firefox中将标签{float:left}更改为{float:right}，它正在完美地更改，但是在Chrome中浮动不起作用。

$(document).on('click', '.right_label', function() {
  if ($(this).is(':selected')) {
    $('.labels').css('float', 'right');
  } else $('.labels').css('float', 'left');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
  <label class="labels">first name</label>
  <input type="text" />
</div>
<select>
  <option class="left_label">left</option>
  <option class="right_label">right</option>
</select>

你可以尝试这样的事情：

$(document).on('change', '#mySelect', function() {
  $('.labels').css('float', $(this,"option:selected").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
  <label class="labels">first name</label>
  <input type="text" />
</div>
<select id="mySelect">
  <option class="left_label" value="left">left</option>
  <option class="right_label" value="right">right</option>
</select>

$（document）.on（'click'，'.myselectbox'，function（）{ } }）; ，这不应该存在，它只有在您检查元素时才有效，

在给出一个选择框时，我们应该使用 

$(document).on('change','.myselectbox',function(){ } });

检查这个，如果你在任何地方不明白，请告诉我。 

<html>
    <head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
    </head>
    <body style="margin-top: 0px; margin-left: 0px;">
        <div id="rightleftDiv">
            <label class="labels">first name</label>
            <input type="text"/>
        </div>
        <select class="myselectbox" name="myselectbox">
            <option class="left_label" value="left">left</option>
            <option class="right_label" value="right">right</option>
        </select>
        <script type="text/javascript">
            $(document).on('change','.myselectbox',function(){
            if($(this).val() == 'right'){
                $('.labels').css('float','right');
            }else $('.labels').css('float','left');
        });
        </script>
    </body>
</html>
相关文章：