无法在 JavaScript 函数中更改 div 颜色答案

【问题标题】：Unable to change div color in JavaScript function无法在 JavaScript 函数中更改 div 颜色
【发布时间】：2014-09-07 15:59:42
【问题描述】：

我已经编写了这个 JavaScript 文件（使用 jQuery）：

$(document).ready(function() {
    $("[data-action=open]").click(show_category);
    $("[data-action=close]").click(hide_category);
});
function show_category() {
    var $category = $(this).data("target");
    if ($("#"+$category).is(":visible")) {
        hide_category($category);
    } else {
        $("#"+$category).show(250);
    }
    $("[data-action=close][data-target="+$category+"]").attr("data-visible", "1");
}
function hide_category($var) {
    if (typeof $var == 'string') {
        var $category = $var;
        $("[data-action=close][data-target="+$category+"]").attr("data-visible", "0");
    } else {
        var $category = $(this).data("target");
        $(this).attr("data-visible", "0");
    }
    $("#"+$category).hide(250);
}

我想让div 不可见（通过将颜色更改为透明）永远不会将颜色更改为透明。我尝试将attr("data-visible", "0") 更改为css("color", "transparent")，但这也没有效果。 只有当我单击具有[data-action=open] 的a 时才会发生这种情况。我的 HTML 在这里：

<a class="category_header" data-target="websites" data-action="open" href="#side_nav">Websites</a>
<a href="#side_nav" data-target="websites"  data-action="close" data-visible="0">✕</a>

我正在尝试这样做，以便我可以单击相同的a 来隐藏和显示，但也可以选择单击✕。

最后，我尝试将其更改为 css("background", "blue") 只是为了进行测试，并且成功了。这是相对的 SCSS：

&[data-action="close"] {
    width: 20px;
    height: 30px;
    background-color: #111;
    text-align: center;
    border-bottom: 1px solid #aaa;
    color: transparent;
    &[data-visible="1"] {   
        color: $#fafafa;
    }
}

感谢任何帮助！

我使用我的代码制作了一个也不起作用的 jsFiddle：http://jsfiddle.net/RmeSJ/ X 在单击之前不会消失..

【问题讨论】：

如果我是正确的，data('anything') 不会返回值，请尝试attr("data-anything")，如果我不正确，请见谅。
当我运行var $category = $(this).data("target"); alert($category); 时，会出现带有正确数据的警报，所以我认为它有效。
@Xero 该值将返回 .data() 并尝试转换该值， .attr() 只是一个简单的字符串。
@user2491647 你试过不透明度吗？也许帮助
@WilfredoP，请看我的 jsFiddle

标签： javascript jquery css sass

【解决方案1】：

将您的功能更改为：

function hide_category($var) {
    var $category = (typeof $var == 'string') ? $var : $(this).data("target");
    $("#" + $category).hide(250, function() {
        $("[data-action=close][data-target=" + $category + "]").attr("data-visible", "0");
    });
}

这里：http://jsfiddle.net/RmeSJ/2/

【讨论】：

谢谢！但是为什么这个功能有效，而不是我上面的功能呢？
.hide() 的顺序。您需要先隐藏，然后更改属性。

【解决方案2】：

如果你想隐藏元素为什么不使用：

$("[data-action=close][data-target="+$category+"]").css('display', 'none');

或

$("[data-action=close][data-target="+$category+"]").hide();

【讨论】：

如果我隐藏它，那么就会有一个空白区域。我的a 标签设置为display: inline-block，所以我只希望颜色透明。但是，如果这就是我想要实现的目标，那就行得通了……
如果你想让它不可见，但它仍然占用空间，试试css('opacity', 0)?或者这不是您想要的？
@LLPrudente，请看我的 jsFiddle
或者如果你设置了一个带有大小的外部内容，你可以隐藏没有空格的元素（：