如何通過切換按鈕切換語言？-有解無憂

我曾嘗試使用切換按鈕將語言從切換eng到Japenese。但它不起作用。請幫助提出建議。這是我的代碼：

<!DOCTYPE html>
<html>
<head>
    <title>Node.js app</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Style.css" />
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>

        <label class="switch">
            <input type="checkbox" id="togBtn">
            <div class="slider round">
                <span language='japanese' class="on">JPN</span>
                <span language='english' class="off">ENG</span>
            </div>
        </label>
        <ul class="nav-items">
    <style>
    .switch {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 34px;
    }

    .switch input {
    display: none;
    }

    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
    }

    .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    }

    input:checked   .slider {
    background-color: #2ab934;
    }

    input:focus   .slider {
    box-shadow: 0 0 1px #2196F3;
    }

    input:checked   .slider:before {
    -webkit-transform: translateX(55px);
    -ms-transform: translateX(55px);
    transform: translateX(55px);
    }

    /*------ ADDED CSS ---------*/
    .on {
    display: none;
    }

    .on, .off {
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    }

    input:checked   .slider .on {
    display: block;
    }

    input:checked   .slider .off {
    display: none;
    }
    </style>
    <div class="content">
        <h2 class="title">Hello World</h2>
    </div>
    <script>
        const sliderEl = document.querySelector('.slider');
        const link = document.querySelectorAll('span');
        const titleEl = document.querySelector('.title');
        const descrEl = document.querySelector('.description');

        link.forEach(el => {
            el.addEventListener('click', () => {
                sliderEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                titleEl.textContent = data[attr].title;
                descrEl.textContent = data[attr].description;
            });
        });

        var data = {
            "english":
            {
                "title": "Hello World"

            },
            "japanese":
            {
                "title": "ハロー?ワールド"

            }
        }
    </script>

</body>
    </html>

uj5u.com熱心網友回復：

我稍微改變了你的代碼。我在復選框的事件上放置了一個事件監聽器，input并根據復選框是否被選中的事實將文本內容更改為相應的語言。

活動課程在您的示例中沒有做任何事情，所以我洗掉了它。

事件物件的currentTarget屬性也將為您提供事件處理程式所附加的元素。這用于查看復選框是否被選中。

document.querySelector('#togBtn').addEventListener('input', (event) => {
  document.querySelector('.title').textContent = data[event.currentTarget.checked ? 'japanese' : 'english'].title;
});

var data = {
  "english": {
    "title": "Hello World"
  },
  "japanese": {
    "title": "ハロー?ワールド"
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked .slider {
  background-color: #2ab934;
}

input:focus .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked .slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}


/*------ ADDED CSS ---------*/

.on {
  display: none;
}

.on,
.off {
  color: white;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked .slider .on {
  display: block;
}

input:checked .slider .off {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round">
    <span language='japanese' class="on">JPN</span>
    <span language='english' class="off">ENG</span>
  </div>
</label>

<ul class="nav-items">
  <div class="content">
    <h2 class="title">Hello World</h2>
  </div>
</ul>

uj5u.com熱心網友回復：

首先，您必須?在此陳述句中添加sliderEl.querySelector('.active')?.classList.remove('active');

下一個問題是，這一行// descrEl.innerText = data[attr].description;是因為物件中沒有描述屬性。

        "english":
        {
            "title": "Hello World"

        },

我會innerText在這里使用titleEl.innerText = data[attr].title;

<!DOCTYPE html>
<html>
<head>
    <title>Node.js app</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Style.css" />
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>

    <label class="switch">
        <input type="checkbox" id="togBtn">
        <div class="slider round">
            <span language='japanese' class="on">JPN</span>
            <span language='english' class="off">ENG</span>
        </div>
    </label>
    <ul class="nav-items">
<style>
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}

.switch input {
display: none;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked   .slider {
background-color: #2ab934;
}

input:focus   .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked   .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on {
display: none;
}

.on, .off {
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked   .slider .on {
display: block;
}

input:checked   .slider .off {
display: none;
}
</style>
<div class="content">
    <h2 class="title">Hello World</h2>
</div>
<script>
    const sliderEl = document.querySelector('.slider');
    const link = document.querySelectorAll('span');
    const titleEl = document.querySelector('.title');
    const descrEl = document.querySelector('.description');

    link.forEach(el => {
        el.addEventListener('click', () => {
            sliderEl.querySelector('.active')?.classList.remove('active');
            el.classList.add('active');

            const attr = el.getAttribute('language');
            titleEl.innerText = data[attr].title;
          //  descrEl.innerText = data[attr].description;
        });
    });

    var data = {
        "english":
        {
            "title": "Hello World"

        },
        "japanese":
        {
            "title": "ハロー?ワールド"

        }
    }
</script>

</body>
</html>

uj5u.com熱心網友回復：

        document.addEventListener('DOMContentLoaded', function () {
        var checkbox = document.querySelector('input[type="checkbox"]');

        checkbox.addEventListener('change', function () {
            
          if (checkbox.checked) {
            // do this
            console.log('Checked');
          } else {
            // do that
            console.log('Not checked' );
          }
        });
      });

https://jsfiddle.net/au3rvcwh/44/

您可以使用它來檢測復選框是否被選中并執行您想要的操作。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416930.html

標籤：

上一篇：如何更改css中的border-top-right-radius？

下一篇：如何使我的文本適合輸入的大小？