选择第一个后，更改div的图标颜色

我想要做的事情：第一次点击会改变背景（我做过），但第二次点击只会改变其他div的图标颜色。

所以如果我在任何DIV

第一点击将改变背景颜色（我做了）

第二，如果我在其他任何一个点击都会改变图标的颜色。

以及第二次点击后，我想，给我一个警告说“你可以选择2格的时候”

我在JS和jQuery非常全新的，这是最大我能做。

HTML：

<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
<div class="box"><i class="fa fa-lg fa-trash"></i></div>

JS：

$(document).ready(function() { 
    var $box = $('.box').mousedown(function() { 
     $(this).toggleClass('highlight'); 
     var flag = $(this).hasClass('highlight') 
     $box.on('mouseenter.highlight', function() { 
      $(this).toggleClass('highlight', flag); 
     }); 
    }); 
    $(document).mouseup(function() { 
     $box.off('mouseenter.highlight') 
    }) 
});

CSS：

.box { 
    float: left; 
    height: 100px; 
    width: 100px; 
    border: 1px solid #000; 
    margin-right: 10px; 
} 
.highlight { 
    background: #0000FF; 
} 

.fa-trash { 
    color:red; 
} 

.fa-trash{ 
    color:green; 
}

这是我的代码：https://jsfiddle.net/wv4f2hda/4/

来源

2016-07-04 Raduken

什么呢图标颜色，这意味着？ – sarath

我用了一个Trash作为示例但会是其他图标，意思是文件比较了解逻辑吗？：），谢谢。 – Raduken

<html> 
<head> 
    <style> 
     .box { 
    float: left; 
    height: 100px; 
    width: 100px; 
    border: 1px solid #000; 
    margin-right: 10px; 
} 
.highlight { 
    background: #0000FF; 
} 

.fa-trash { 
    color:red; 
} 

.fa-trash{ 
    color:green; 
} 
     </style> 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/> 
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
$(document).ready(function() { 
    var flag = false; 
    var $box = $('.box').mousedown(function() { 
     $(this).toggleClass('highlight'); 
     if(flag) $('.fa-trash').css('color' , 'black'); 
     flag = $(this).hasClass('highlight') 
     $box.on('mouseenter.highlight', function() { 
      $(this).toggleClass('highlight', flag); 
     }); 
    }); 
    $(document).mouseup(function() { 
     $box.off('mouseenter.highlight') 
    }) 
}); 
    </script> 
</head> 
<body> 
    <div class="box"><i class="fa fa-lg fa-trash"></i></div> 
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
</body> 
</html>

试试这个

来源

2016-07-04 18:32:59

谢谢你的回答，但唯一的图标，谁想要改变颜色是被点击，现在正在改变。背景色不会改变被点击的图标的图标颜色，以及在第二次点击之后说人不能再点击阻止点击直到他们取消选择所选的div。感谢您的帮助。 – Raduken

试试这个脚本，只是让真假的标志，可能是解决你的问题

$(document).ready(function() { 
 

 
    var click = false; 
 
    $(document).on('click', '.box', function(){ 
 
    \t if($(this).hasClass('highlight')){ 
 
     \t $(this).removeClass('highlight'); 
 
     click = false; 
 
     return false; 
 
     } 
 
    \t if(!click){ 
 
     \t $(this).find("i").removeClass('red'); 
 
     \t $(this).addClass('highlight'); 
 
     click = true; 
 
     }else{ 
 
     \t $(this).find("i").toggleClass('red'); 
 
     } 
 
    }); 
 
});

.box { 
 
    float: left; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid #000; 
 
    margin-right: 10px; 
 
} 
 
.highlight { 
 
    background: #0000FF; 
 
} 
 

 
.fa-trash.red { 
 
    color:red; 
 
} 
 

 
.fa-trash{ 
 
    color:green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
 
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
 
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
 
<div class="box"><i class="fa fa-lg fa-trash"></i></div>

来源

2016-07-04 19:07:38

很好，我正在寻找:)，谢谢，但我怎么做后，第二次点击时，将图标变为红色出现一条消息，说你不能选择超过2？将有可能吗？ – Raduken

选择第一个后，更改div的图标颜色

回答

相关问题