时间戳

首页 > 解决方案 > 如何将切换属性用于 JavaScript 中已存在的属性？

javascript - 如何将切换属性用于 JavaScript 中已存在的属性？

问题描述

单击按钮后，我希望它从“书签”中“加入书签”。这是我能做到的。但是如何切换它，如果我再次单击它，它会返回到“书签”。以及如何将背景颜色更改为另一种颜色并保持这种状态，直到我再次单击它。在这里，只有当我按住鼠标时颜色才会改变，但当我松开鼠标时颜色会变回来。

html

        <h1>Mastercraft Bamboo Monitor Riser</h1>
        <p>A beautiful & handcrafted monitor stand to reduce neck and eye strain.</p>
        <div class="flex">
            <input type="submit" name="" value="Back this project" class="button">
            <div class="bookmark">
                <i class="fas fa-bookmark icon"></i>
                <input type="submit" name="" value="Bookmark " class="book" toggleAttribute("value","Bookmarked");>     
            </div>  
        </div>      
    </section>

css

.card{
    position: absolute;
    top: 330px;
    left: 380px;
    background-color: white;
    padding:60px 130px 0px 130px;
    border-radius: 6px;
    line-height: 2;
}
.text-center{
    text-align: center;
}
.gray{
    background-color: rgb(245, 245, 245);
    height: 1600px;
}
.card h1{
    font-weight: 700;
    font-size:26px;
}
.card p{
    color: rgb(120,120,120);
    font-size: 15px;
}
.card{
    height: 270px;
}
.button{
    position: relative;
    right: 58px;
    padding: 16px 45px 15px 45px;
    background-color: hsl(176, 72%, 28%);
    border-radius: 20px;
    margin-top: 30px;
    border: none;
    color: white;
    outline: none;
    cursor: pointer;
    font-weight: 700;
}

.book{
    position: relative;
    left: 75px;
    padding: 18px 35px 15px 45px;
    background-color: rgb(245, 245, 245);
    border-radius: 20px;
    margin-top: 30px;
    border: none;
    color: rgb(120, 120, 120);
    outline: none;
    cursor: pointer;
    font-weight: 700;
}
.book:active{
    color: white;
    background-color: hsl(176, 50%, 47%);
}


.icon{
    position: relative;
    top: 17px;
    left: 110px;
    box-sizing: content-box;
    border-radius: 50%;
    padding: 17px 19px;
    background-color: rgb(100, 100, 100);
    color: rgb(180, 180, 180);
    z-index: 1;
}
.icon:active{
    color: white;
    background-color: hsl(176, 72%, 28%);
}

js

window.onload=function(){
const book= document.querySelector('.book');
const icon= document.querySelector('.icon');
 
book.addEventListener('click',()=>{
    book.toggleAttribute("value","Bookmarked");
    book.classlist.toggle('active');
    icon.classlist.toggle('active');
})
}

标签： javascripthtmlcss

解决方案

您正在使用伪类 :active。它只执行元素单击，然后它将反转。因此您需要将按钮和图标的 css更改:active为.active

更新

对于字符串切换使用 2 data-attr。建议将数据属性用于自定义属性良好实践

window.onload = function() {
  const book = document.querySelector('.book');
  const icon = document.querySelector('.icon');

  book.addEventListener('click', () => {
      book.value = book.value == book.getAttribute('data-toggle-text1') ? book.getAttribute('data-toggle-text2') :
    book.getAttribute('data-toggle-text1');
    book.classList.toggle('active');
    icon.classList.toggle('active');
  })
}
.card {
  position: absolute;
  top: 330px;
  left: 380px;
  background-color: white;
  padding: 60px 130px 0px 130px;
  border-radius: 6px;
  line-height: 2;
}

.text-center {
  text-align: center;
}

.gray {
  background-color: rgb(245, 245, 245);
  height: 1600px;
}

.card h1 {
  font-weight: 700;
  font-size: 26px;
}

.card p {
  color: rgb(120, 120, 120);
  font-size: 15px;
}

.card {
  height: 270px;
}

.button {
  position: relative;
  right: 58px;
  padding: 16px 45px 15px 45px;
  background-color: hsl(176, 72%, 28%);
  border-radius: 20px;
  margin-top: 30px;
  border: none;
  color: white;
  outline: none;
  cursor: pointer;
  font-weight: 700;
}

.book {
  position: relative;
  left: 75px;
  padding: 18px 35px 15px 45px;
  background-color: rgb(245, 245, 245);
  border-radius: 20px;
  margin-top: 30px;
  border: none;
  color: rgb(120, 120, 120);
  outline: none;
  cursor: pointer;
  font-weight: 700;
}

.book.active {
  color: white;
  background-color: hsl(176, 50%, 47%);
}

.icon {
  position: relative;
  top: 17px;
  left: 110px;
  box-sizing: content-box;
  border-radius: 50%;
  padding: 17px 19px;
  background-color: rgb(100, 100, 100);
  color: rgb(180, 180, 180);
  z-index: 1;
}

.icon.active {
  color: white;
  background-color: hsl(176, 72%, 28%);
}
<h1>Mastercraft Bamboo Monitor Riser</h1>
<p>A beautiful & handcrafted monitor stand to reduce neck and eye strain.</p>
<div class="flex">
  <input type="submit" name="" value="Back this project" class="button">
  <div class="bookmark">
    <i class="fas fa-bookmark icon"></i>
    <input type="submit" name="" value="Bookmark " class="book" data-toggle-text1="Bookmarked" data-toggle-text2="Bookmark">
  </div>
</div>
</section>

推荐阅读