bugfix> javascript > 投稿

私は次のHTMLラベルを持っています:

<div class="VINDesc">
    <input class="toggle-box" id="toggle" onclick="sendVinCustomLink()">
    <label class="VINDesc-label" for="toggle">foo?</label>
    <p>NEW TEXT.</p>
</div

ラベルの css 次のとおりです。

.toggle-box + label:after {
    background-color: #3b434a;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #FFFFFF;
    content: "+";
    font-weight: bold;
    height: 12px;
    margin-left: 5px;
    text-align: center;
    padding: 0px 2px;
}

私の質問は、このスタイルをクリックしたときにどのように追加するかです。

.toggle-box:checked + label:after {
    content: "\2212";
}

これまでに試したすべてが要素を更新しません。私は作ろうとしています + サインはに変わります - クリックするだけで。

sendVinCustomLink()関数に機能を追加しましたが、ラベルの適切な更新が行われていないようです css

これをどのように行うことができるか考えていますか?

編集#1:

https://imgur.com/a/jBDcDqX

回答 1 件
  • 編集

    これを行う1つの方法は、次のようにCSSでコンテンツを変数として宣言することです。

    content:var(--content,"+");
    
    

    次に、次のようにコンテンツをターゲットにして変更します。

    div.style.setProperty("--content", "'-'")
    
    

    さらに、コンテンツを以前の「+」状態に切り替えることに関するコメントで他の質問に答えるため。単に適用します boolean クリックごとに次のように変更できます。

    var bool = false;
      if (bool === false) {
        div.style.setProperty("--content", "'-'")
        bool = true;
      } else if (bool === true) {
        div.style.setProperty("--content", "'+'")
        bool = false;
      }
    
    

    上記のコードを使用して、宣言したブール値に基づいてコンテンツ文字列を効果的に変更しています。 bool 。いつ true 私たちは見る + そしていつ false 私たちは見る -

    以下のスニペットを参照してください。

    var div = document.querySelector('.toggle-box + label');
    var bool = false;
    function changer() {
      if (bool === false) {
        div.style.setProperty("--content", "'-'")
        bool = true;
      } else if (bool === true) {
        div.style.setProperty("--content", "'+'")
        bool = false;
      }
    }
    
    
    .toggle-box+label:after {
      background-color: #3b434a;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      color: #FFFFFF;
      content: var(--content, "+");
      font-weight: bold;
      height: 12px;
      margin-left: 5px;
      text-align: center;
      padding: 0px 2px;
    }
    
    
    <div class="VINDesc">
      <input class="toggle-box" id="toggle" onclick="changer()">
      <label class="VINDesc-label" for="toggle">foo?</label>
      <p>NEW TEXT.</p>
    </div>
    
    

あなたの答え