Question

当2个ID存在时，我试图使每个div的背景改变颜色。它没有改变颜色。我无法弄清楚我做错了什么。我是javascript的新手。我有一个嵌入式样式表，不知道javascript是否会覆盖css。此外，我知道一些PHP，并希望在整个程序中“回显”变量，以便我可以看到字符串值是什么，以便调试我自己的代码。最简单的方法是什么？

function drop(ev){
    ev.preventDefault();
    var image = ev.dataTransfer.getData("content");
    ev.target.appendChild(document.getElementById(image));
    var mydiv = '';
    for (var i=0;i<9;i++)
    {
        if ($('#target'.i).find('#answer'.i).length == 1)
        {
            mydiv = document.getElementById('target'+i);
            mydiv.style.backgroundColor = '#00CC00';
        }
        else
        {
            mydiv = document.getElementById('target'+i);
            mydiv.style.backgroundColor = '#FF0000';
        }
    }
}

Answer 1

我认为你的问题可能出在这条线上。不是+正确构建id。

if ($('#target'.i).find('#answer'.i).length == 1)

所以你的代码应该是：

if ($('#target'+i).find('#answer'+i).length == 1)

Answer 2

记住我不是jQuery向导，我的第一个想法是这样的：

$('div[id^=target]').each(function() {
    var el = $(this).find('div[id^=answer]').addBack();
    el.css('backgroundColor', el.length > 1 ? '#00CC00' : '#FF0000');
});

...但后来我注意到，与你的例子不同，我正在改变父和子div。这样的事情可能更接近你的意图：

$('div[id^=target]').css('backgroundColor', function () {
    return $(this).find('div[id^=answer]').length ? '#00CC00' : '#FF0000';
});

如果您愿意，也可以保留for循环：

for (var i = 0; i < 9; ++i) {
    $('div#target' + i).css('backgroundColor', function() {
        return $(this).find('div#answer' + i).length ? '#00CC00' : '#FF0000'; 
    });
}

...而且，只是为了好玩，有点深奥：

$('div[id^=target]:has(div[id^=answer])').css('backgroundColor', '#00CC00');
$('div[id^=target]:not(:has(div[id^=answer]))').css('backgroundColor', '#FF0000');

Fiddle!

Answer 3

您的代码应该与see fiddle）一起使用正确的连接运算符，即使用+代替.，但是您应该记住以下几点：

第1点：

在i循环中迭代的所有for变量中，如果没有div且id等于"target" + i，您将结束于以下else块：

else
{
    mydiv = document.getElementById('target'+i); // null
    mydiv.style.backgroundColor = '#FF0000';
}

在该地点mydiv将为null而mydiv.style将引发错误。

第2点：

似乎您使用jQuery来查找答案元素，而您使用document.getElementById（它是DOM API的一部分）来选择目标元素。在那里使用jQuery会更加一致。

第3点：

如果您只想输出某个变量的值，可以使用console.log，它将在浏览器的javascript控制台中输出。 console对象由浏览器提供，因此您可能没有console.log方法，但如果您使用的是最新的浏览器，则很有可能获得它。

总结一下，see this fiddle是一个考虑这些要点的例子。

当2个ID为真时，尝试使div背景改变颜色

3 个答案: