Question

我想一次只选择一个div并同时取消选择其他div。但是我的代码工作不正常。如果选择div，则其颜色应为“#cccccc”，如果未选择div，则其颜色应为“#ffffff”。

这是我的HTML代码

$jsqla = mysql_query("select * from products where id='$product_id'") or die(mysql_error());
$jfeta = mysql_fetch_assoc($jsqla);

$formats = explode(";", $jfeta['formats']);

<div class="">
    <?php foreach($formats as $v){ ?>
        <label style="line-height: 1.25em;display: block;width: 100px;margin-right: 10px;float: left;">                         
            <div id="format-id_<?php echo $v?>" style="border: 1px solid;border-radius: 9px;text-align: center;padding-top: 10px;padding-bottom:10px;padding-left: 3px;padding-right: 3px;border-color: #cccccc;font-family: 'SSemibold'; font-size: 13px; color: #44b7da;">                                
                <input type="radio" value="<?php echo $v; ?>" name="abc" style="visibility:hidden;" id="<?php echo $v ?>" onClick="changeColour(this)"/>
                <span style="margin:-17px auto auto 0px;display:block;"><?php echo $v; ?></span>                            
            </div>                      
        </label>
    <?php } ?>      
</div>

这是我的jQuery代码。

$(document).ready(function(e) {
    $(':radio').bind('change',function(){
      var th = $(this);
      id = th.attr('id'); 
      var divid = 'format-id_'+id;

      if(th.is(':checked')){
          $('#' + divid).css('background-color', '#cccccc');
      } else {
          $('#' + divid).css('background-color', '#ffffff');
      }
    });
});

Answer 1

Here is the working demo
$('div').on('click',function(){
    $(this).css('color','red').siblings('').css('color','black');
});

http://jsfiddle.net/silpa/286L19jt/

Answer 2

试试这个：使用.on()代替.bind()。利用带有选择器的jQuery start来设置id为div到format-id_的所有#ffffff的背景颜色。并将所选div设置为#cccccc

$(document).ready(function(e) {
    $(':radio').on('change',function(){
      var id = $(this).attr('id'); 
      var divid = 'format-id_'+id;
      $('div[id^="format-id_"]').css('background-color', '#ffffff');
      $('#' + divid).css('background-color', '#cccccc');

    });
});

Answer 3

尝试

＆＃13;

$(document).ready(function(e) {
  var $radios = $(':radio'), //cached reference to radios elements
    $divs = $radios.parent(); //the divs are the parent element of radio
  $radios.bind('change', function() {
    var $this = $(this),
      $div = $this.parent();

    //change the color of the current div
    $div.css('background-color', this.checked ? '#cccccc' : '#ffffff');
    //chang the color of all other divs
    $divs.not($div).css('background-color', '#ffffff');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="">
  <label style="line-height: 1.25em;display: block;width: 100px;margin-right: 10px;float: left;">
    <div id="format-id_1" style="border: 1px solid;border-radius: 9px;text-align: center;padding-top: 10px;padding-bottom:10px;padding-left: 3px;padding-right: 3px;border-color: #cccccc;font-family: 'SSemibold'; font-size: 13px; color: #44b7da;">
      <input type="radio" value="1" name="abc" style="visibility:hidden;" id="1" onClick="changeColour(this)" />
      <span style="margin:-17px auto auto 0px;display:block;"></span> 
    </div>
  </label>
  <label style="line-height: 1.25em;display: block;width: 100px;margin-right: 10px;float: left;">
    <div id="format-id_2" style="border: 1px solid;border-radius: 9px;text-align: center;padding-top: 10px;padding-bottom:10px;padding-left: 3px;padding-right: 3px;border-color: #cccccc;font-family: 'SSemibold'; font-size: 13px; color: #44b7da;">
      <input type="radio" value="2" name="abc" style="visibility:hidden;" id="2" onClick="changeColour(this)" />
      <span style="margin:-17px auto auto 0px;display:block;"></span> 
    </div>
  </label>
  <label style="line-height: 1.25em;display: block;width: 100px;margin-right: 10px;float: left;">
    <div id="format-id_3" style="border: 1px solid;border-radius: 9px;text-align: center;padding-top: 10px;padding-bottom:10px;padding-left: 3px;padding-right: 3px;border-color: #cccccc;font-family: 'SSemibold'; font-size: 13px; color: #44b7da;">
      <input type="radio" value="3" name="abc" style="visibility:hidden;" id="3" onClick="changeColour(this)" />
      <span style="margin:-17px auto auto 0px;display:block;"></span> 
    </div>
  </label>
</div>

＆＃13;

注意：首选类来设置内容样式而不是使用内联样式

如何一次选择一个div并取消选择jQuery中的其他div？

3 个答案: