Question

我有这个代码。这实际上是一个考验。我想使用变量hoveredColor来创建一个改变“this”div背景的函数。但我似乎无法使其发挥作用。

<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

我稍微改进了你的脚本，这就是我所做的：

如您的代码所示，声明一个名为currentcolor的全局颜色，以便当鼠标离开#this中的<div>时，#settings div会恢复为红色背景
声明一个名为fixcolor的全局变量。如果用户点击了div来设置/修复颜色，我们会告诉我们，我们稍后会更新颜色，这样就不会干扰鼠标离开事件。

提取上述所有信息，这里是jQuery代码（和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;
    });
});

但是，这里有一些建议：

将颜色存储在ID中，但不应存储为HTML5 data-属性。这允许您更改div的颜色，而无需更新样式表中的ID及其选择器（如果有）。
取消隐藏#settings 。我没有看到隐藏的一点，因为它只是使脚本无法使用，因为无论如何所有的div都是对用户隐藏的。

要使用data-属性，请将id替换为您选择的名称，例如data-bgcolor：

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

可以使用$(this).data('bgcolor')或$(this).attr('data-bgcolor')访问此属性中的值。

Answer 2

由于您的JavaScript代码如此严格依赖于HTML标记的格式，因此在JavaScript中创建HTML可能是一个好主意。如果您需要对这个小组件进行更改。您可以在一个位置（.js）执行此操作，而无需在HTML和JavaScript中进行更改。

这可能是什么样的。

＆＃13;

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);
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: