如何使用javascript删除添加的值

Question

我的javascript代码有点问题。

我如何获得此代码：

HTML

<button id="toggle1" onclick="myFunction1()">Circle</button>
<button id="toggle2" onclick="myFunction2()">Square</button>
<button id="toggle3" onclick="myFunction3()">Border</button>

<li>
    <div class="icon lm-home"></div>
    <input id="text" class="text" type="text" readonly="readonly" value="home">
</li>
<li>
    <div class="icon lm-arrow"></div>
    <input id="text" class="text" type="text" readonly="readonly" value="arrow">
</li>
<li>
   <div class="icon lm-info"></div>
   <input id="text" class="text" type="text" readonly="readonly" value="info">
</li>

脚本

document.getElementById('toggle1').onclick = function() {
        var txt  = ' circle';
            $.each( $(".text"), function( key, inputItem ) { 
            inputItem.value = inputItem.value.indexOf(txt) != -1 ? inputItem.value.replace(txt, '') : inputItem.value + txt;
            });

}

document.getElementById('toggle2').onclick = function() {
        var txt  = ' square';
        $.each( $(".text"), function( key, inputItem ) { 
            inputItem.value = inputItem.value.indexOf(txt) != -1 ? inputItem.value.replace(txt, '') : inputItem.value + txt;
            });
}

document.getElementById('toggle3').onclick = function() {
        var txt  = ' border';
        $.each( $(".text"), function( key, inputItem ) { 
            inputItem.value = inputItem.value.indexOf(txt) != -1 ? inputItem.value.replace(txt, '') : inputItem.value + txt;
                });
}

  需要

Jquery 2.2.1

要点击切换1，它会添加圆圈。但是当我点击toggle2时，它会添加方块并删除圆圈。副Versa用于其他按钮。

有人可以帮我吗？

  

我使用的代码的模型：JSFiddle

Answer 1

试试这个

$('#toggle1,#toggle2,#toggle3').click(function() {
    toggleText(this.innerHTML); 
});


function toggleText(text)
{
    $(".text").each(function() {           
       $(this).val($(this).val().split( /circle|square/ ).join("") + " " + text); //remove existing circle or square and then add text 
    });
}

Answer 2

您可以将inputItem值重置为＆＃39; home＆＃39;每次点击一个按钮

inputItem.value = "home"; 

JSFiddle：https://jsfiddle.net/93vrpybn/

Answer 3

以下是我正在寻找的答案。

＆＃13;

＆＃13;

$('#toggle1,#toggle2,#toggle3,#toggle4').click(function() {
  toggleText(this.innerHTML.toLowerCase());
});

function toggleText(text) {
  $(".text").each(function() {
    var totalArray = [' circle', ' square', ' border', 'burst'];
    if ($(this).val().indexOf(text) != -1) {
      var regex1 = new RegExp(text, "");
      $(this).val($(this).val().replace(regex1, ""));
      console.log("After replacing " + $(this).val());
    } else {
      //console.log( "After replacing " + $(this).val() );
      $(this).val($(this).val() + "" + text);
      //console.log( "After replacing " + $(this).val() );
    }
    totalArray.splice(totalArray.indexOf(text), +1);
    console.log(totalArray);
    var regex2 = new RegExp(totalArray.join("|"), "");
    console.log(regex2);
    $(this).val($(this).val().replace(regex2, ""));
  });
}


$(document).ready(function() {
  $("button.cirkel").click(function() {
    $(".icon").removeClass("border");
    $(".icon").removeClass("square");
    $(".icon").toggleClass("circle");
    $("button.cirkel").toggleClass("on");
    $("button.vierkant").removeClass("on");
    $("button.rand").removeClass("on");
  });

  $("button.vierkant").click(function() {
    $(".icon").removeClass("border");
    $(".icon").toggleClass("square");
    $(".icon").removeClass("circle");
    $("button.cirkel").removeClass("on");
    $("button.vierkant").toggleClass("on");
    $("button.rand").removeClass("on");
  });

  $("button.rand").click(function() {
    $(".icon").toggleClass("border");
    $(".icon").removeClass("square");
    $(".icon").removeClass("circle");
    $("button.cirkel").removeClass("on");
    $("button.vierkant").removeClass("on");
    $("button.rand").toggleClass("on");
  });

  $("#uitleg-toggle").click(function() {
    $("#uitleg").toggleClass("zichtbaar");
  });

  $("input:text").focus(function() {
    $(this).select();
  });

});

＆＃13;

body {
  font-family: Arial, Helvetica, Verdana, sans-serif;
}
ul {
  padding: 0;
  margin: 10px 0 0 0;
}
li {
  list-style-type: none;
  display: block;
  left: 0;
  margin: 5px 0 5px 0;
  postiton: relative;
  float: left;
}
button {
  width: 100px;
  border-radius: 7px;
  height: 40px;
  font-size: 20px;
  border: 0px;
  margin: 10px 10px 10px 0;
  color: #FFF;
  background-color: #D95021;
  border: 3px outset #EA6C40;
  display: block;
  float: left;
  cursor: pointer;
  outline: none;
}
button:hover {
  background-color: #F9794D;
}
.on {
  background-color: #5DC55D !important;
  color: #FFF !important;
  border: 3px outset #6BD46B;
}
.icon {
  height: 66px !important;
  width: 66px !important;
  margin: 0 auto;
  font-size: 55px !important;
  padding: 10px !important;
  text-align: center;
}
input {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #dedede;
  font-size: 16px;
  text-transform: uppercase;
}
.circle {
  border-radius: 80px !important;
  display: block;
  border: 3px solid #FF0066;
  background-color: #FF0066;
  transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
  cursor: pointer;
  text-decoration: none;
  color: #FFF !important;
}
.circle:hover {
  background-color: #FFF;
  border: 3px solid #FF0066;
  color: #FF0066 !important;
}
.square {
  border-radius: 10px !important;
  display: block;
  background-color: #FF0066;
  border: 3px solid #FF0066;
  transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
  cursor: pointer;
  text-decoration: none;
  color: #FFF !important;
}
.square:hover {
  background-color: #FFF;
  border: 3px solid #FF0066;
  background-color: #FFF;
  color: #FF0066 !important;
}
.border {
  border-radius: 80px !important;
  border: 3px solid #FF0066;
  display: block;
  background-color: #FFF;
  transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
  cursor: pointer;
  text-decoration: none;
  color: #FF0066 !important;
}
.border:hover {
  background-color: #FF0066 !important;
  color: #FFF !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click to add a class to see how it looks with a extra classname.</h3>

<button id="toggle1" class="cirkel">Circle</button>
<button id="toggle2" class="vierkant">Square</button>
<button id="toggle3" class="rand">Border</button>

<div style="clear:both;"></div>

<ul class="glyphs css-mapping">
  <li>
    <div class="icon lm-home">1</div>
    <input id="text" class="text" type="text" readonly="readonly" value="home">
  </li>
  <li>
    <div class="icon lm-notes">2</div>
    <input id="text" class="text" type="text" readonly="readonly" value="notes">
  </li>
  <li>
    <div class="icon lm-info">3</div>
    <input id="text" class="text" type="text" readonly="readonly" value="info">
  </li>
  <li>
    <div class="icon lm-support">4</div>
    <input id="text" class="text" type="text" readonly="readonly" value="support">
  </li>
  <li>
    <div class="icon lm-check">5</div>
    <input id="text" class="text" type="text" readonly="readonly" value="check">
  </li>
  <li>
    <div class="icon lm-cross">6</div>
    <input id="text" class="text" type="text" readonly="readonly" value="cross">
  </li>
  <li>
    <div class="icon lm-min">7</div>
    <input id="text" class="text" type="text" readonly="readonly" value="min">
  </li>
  <li>
    <div class="icon lm-full">8</div>
    <input id="text" class="text" type="text" readonly="readonly" value="full">
  </li>
  <li>
    <div class="icon lm-menu">9</div>
    <input id="text" class="text" type="text" readonly="readonly" value="menu">
  </li>
  <li>
    <div class="icon lm-menu-list">10</div>
    <input id="text" class="text" type="text" readonly="readonly" value="menu-list">
  </li>
  <li>
    <div class="icon lm-dots">11</div>
    <input id="text" class="text" type="text" readonly="readonly" value="dots">
  </li>
  <li>
    <div class="icon lm-star">12</div>
    <input id="text" class="text" type="text" readonly="readonly" value="star">
  </li>
  <li>
    <div class="icon lm-zoom">13</div>
    <input id="text" class="text" type="text" readonly="readonly" value="zoom">
  </li>
  <li>
    <div class="icon lm-excl-mark">14</div>
    <input id="text" class="text" type="text" readonly="readonly" value="excl-mark">
  </li>
  <li>
    <div class="icon lm-question">15</div>
    <input id="text" class="text" type="text" readonly="readonly" value="question">
  </li>
  <li>
    <div class="icon lm-arrow-rd">16</div>
    <input id="text" class="text" type="text" readonly="readonly" value="arrow-rd">
  </li>
  <li>
    <div class="icon lm-s-arrow-r">17</div>
    <input id="text" class="text" type="text" readonly="readonly" value="s-arrow-r">
  </li>
  <li>
    <div class="icon lm-reset">18</div>
    <input id="text" class="text" type="text" readonly="readonly" value="reset">
  </li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;