Question

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

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

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>

Answer 1

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

将代码更改为类似的内容- $(". divOption").live("click", function(){ ... })

在此处查看文档：{{3}}

如果代码仍然无法正常工作，请先仅检查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()有效：) !!

无法使用jQuery更改CSS样式属性

1 个答案: