如何将ID设为变量并在函数中使用

Question

I have this code. It's actually a test. I want to use the variable hoveredColor to create a function changing the "this" div's background. But i can't seem to make it work.

<script>
$(document).ready(function(){
  var currentcolor = "red";
  var hovercolor="";
  var hoveredColor = "";
  setColor();
  $("#settings div").hover(function(){
    hoveredColor = $(this).attr('id');
  }); 

  $("#black").hover(function(){
    hovercolor = $("#black").attr("id");
    document.getElementById('this').style.backgroundColor=hovercolor;
  },function(){
    document.getElementById('this').style.backgroundColor=currentcolor;
  });
  $("#"+hoveredColor).click(function(){ 
    currentcolor = $("#"+hoveredColor).attr('id');
    setColor();
  });

</script>

<div style="display: none;width:100%;" id="settings">
    <div style="width: 50px;height:50px; background-color: blue; float: left;display: block;margin-left: 10px" id="blue"> ff </div>
    <div style="width: 50px;height:50px; background-color: black; float: left;display: block;margin-left: 10px" id="black"> Black </div>
    <div style="width: 50px;height:50px; background-color: pink; float: left;display: block;margin-left: 10px" id="pink"> Pink </div>
</div>


<div style="width: 100%; height: 100px;margin-top: 75px;" id="this">
    <p>I hope this works.</p>
</div>

Answer 1

I have improved your script a little, and here is what I have done:

1. Declare a global colour called currentcolor , as your code has shown, so that the #this div reverts to red background when the mouse leaves the child <div> in #settings .
2. Declare a global variable called fixcolor . This will let us know if the user has clicked on a div to set/fix the color, which we will update it later so that this does not interfere with the mouse leave event.

Distilling all that information above, here is the jQuery code (and view the demo fiddle here ):

$(function() {
    // Define global variables
    var currentcolor = 'red',
        fixcolor = false;

    $('#settings div').hover(function() {
        // Mouseover
        $('#this').css('background-color', $(this).attr('id'));
    }, function() {
        // Mouseout
        if(!fixcolor) $('#this').css('background-color', currentcolor);
    }).click(function() {
        // Bind click
        $('#this').css('background-color', $(this).attr('id'));
        fixcolor = true;
    });
});

---

However, here are some suggestions:

1. Store the colour not in the ID, but as a HTML5 data- attribute . This allows you to change the color of the divs without needing to update the ID and its selectors in your stylesheet, if any.
2. Unhide the #settings . I don't see a point in hiding, as it simply renders the script unusable since all the divs are hidden from the user, anyway.

To use the data- attribute, replace id with a name of your choice, say data-bgcolor :

<div style="width:100%;" id="settings">
    <div style="..." data-bgcolor="blue"> ff </div>
    <!-- MORE -->
</div>

And the value in this attribute can be accessed by either using $(this).data('bgcolor') or $(this).attr('data-bgcolor') .

Answer 2

Since your JavaScript code so tightly depends on the format of your HTML markup, it might be a good idea to handle creating that HTML inside of your JavaScript. If you need to make changes to this little 'component' of your page, you can do it in one location (the .js) instead of having to make changes in your HTML and JavaScript.

Here's what the might look like.

 var DEFAULT_COLOR = 'red', COLOR_OPTIONS = [ { 'text': 'Blue', 'color': 'blue' }, { 'text': 'Black', 'color': 'black' }, { 'text': 'Pink', 'color': 'pink' }, ], COLOR_OPTION_TEMPLATE = '<div class="color-option" data-color="{{color}}" style="background-color: {{color}};">{{text}}</div>', settings_div = $('#settings'), bg_change_div = $('#this'), color_options_html = '', color_option_html = ''; function setBgColor(ele, color) { $(ele).css('background-color', color); } // Build HTML for the color-options divs. $.each(COLOR_OPTIONS, function(i, color_option) { color_option_html = COLOR_OPTION_TEMPLATE.replace(/{{color}}/g, color_option.color); color_option_html = color_option_html.replace(/{{text}}/, color_option.text); color_options_html += color_option_html; }); $(document).ready(function() { // add color-options HTML to #settings settings_div.html(color_options_html); // set default background-color for #this setBgColor(bg_change_div, DEFAULT_COLOR); settings_div.on('mouseenter', '.color-option', function(e) { setBgColor(bg_change_div, $(e.currentTarget).data('color')); }); settings_div.on('mouseleave', '.color-option', function() { setBgColor(bg_change_div, DEFAULT_COLOR); }); }); 

 .color-option { height: 50px; width: 50px; display: inline-block; margin-left: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="settings"> <!-- HTML will be added here via .js --> </div> <div style="width: 100%; height: 100px;margin-top: 75px;" id="this"> <p>I hope this works.</p> </div>