时间戳

首页 > 解决方案 > 无法使用 jquery 更改 css 样式属性

javascript - 无法使用 jquery 更改 css 样式属性

问题描述

在 CSS 中，我有一个带有display:none属性的块。有一个按钮元素可以将此属性更改为block. 然后我按下块中的按钮元素，它显示了，但没有显示。

我试图更改标有注释的代码行中的其他 CSS 属性，//hiding但它也不起作用。

CSS

.optionPanel{
    width: 20rem;
    height: 10rem;
    overflow: auto;
    background: whitesmoke;
    display: none;
}

JS

$(document).ready(()=>{
    selectsFiling();
    $('.divOption').click(function (e){
        let _select = $(this).parent().parent().parent().children().get(0);
        let _label = $(this).parent().parent();
        let _span = _label.children().get(1);
        $(_select).val(this.textContent);
        let k = $('.optionPanel');
        k.css('display', 'none');                   //hiding
        _span.textContent = this.textContent;

    });

    $('.fluentSelect label').click(function (e){
        let _labelPanel = $(this).children(':first');
        _labelPanel.css('display', 'block');                 //showing
    });
});

HTML

<body>
    <div class="fluentSelect">
        <select name="r-select" id="r-select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <label>
            <div class="optionPanel">
            </div>
            <span></span>
        </label>
    </div>
</body>

标签： javascriptjqueryhtmlcss

解决方案

尝试使用实时添加点击。由于按钮是在运行时添加的，因此不会将单击侦听器添加到按钮中。

将代码更改为这样的 - $(". divOption").live("click", function(){ ... })

在此处查看文档：https ://www.w3schools.com/jquery/event_live.asp

如果代码仍然不起作用，请首先检查仅console.log("click") 作为代码

let _select = $(this).parent().parent().parent().children().get(0);
let _label = $(this).parent().parent();
let _span = _label.children().get(1);
$(_select).val(this.textContent);

看起来真的很冒险。元素选择可能存在一些错误或问题。虽然希望live()有效:) !!

推荐阅读