在事件 onclick 中更改 class 值 javascript？

Question

您好，我只需要在 javascript 中執行此操作（不在 jquery 中）

您將如何在 javascript 中執行類似的查詢？

    <body>

    <div class="wysiwyg">text......text...</div>

<div class="btn btn-primary verMas">Ver más</div>

    <script>
     $('.verMas').click(function(e){
            e.preventDefault();
           $('.wysiwyg').css('height','auto');
           $(this).hide();
            $('.layerMiddle').hide();
        });
    </script></body>

Answer 1

您的示例表明您需要能夠

Select 來自 DOM 的項目
添加點擊事件監聽器
修改顯示state的元素

看看你如何在原生 JS 中實現這些，我建議如下：

document.querySelector()

這為 JQuery 的選擇器提供了一些類似的功能——至少對於這個用例而言。

element.addEventListener('click', function)

這提供了與 JQuery 的$('').click(function)等效的功能

element.style

這可以修改元素的內聯樣式，因此將display樣式設置為none可以實現此目的

把這些放在一起：

 // use querySelector to get the.verMas element and add on-click event listener document.querySelector('.verMas').addEventListener('click', e => { // prevent default event e.preventDefault() // use querySelector to get the.wysiwyg element // set the style.height parameter to auto document.querySelector('.wysiwyg').style.height = 'auto' // e.target is the element that this event was fired on // to hide it, set the style.display parameter to none e.target.style.display = 'none' // use querySelector to get the.layerMiddle element //hide the layerMiddle Element document.querySelector('.layerMiddle').style.display = 'none' })

 div { padding: 10px; }.btn{ display: inline-block; padding: 6px 12px; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #333; background-color: #fff; border-color: #ccc; }

 <div class="wysiwyg">text......text...</div> <div class="layerMiddle">[Layer Middle]</div> <div class="btn btn-primary verMas">Ver más</div>

在事件 onclick 中更改 class 值 javascript？

問題描述

1 個解決方案

解決方案1
0 2019-11-12 17:35:04

在事件 onclick 中更改 class 值 javascript？

問題描述

1 個解決方案

解決方案1 0 2019-11-12 17:35:04

解決方案1
0 2019-11-12 17:35:04