单击div时复制到剪贴板

Question

如何使用此代码以便它影响多个输入字段。

因此，当有人点击某个按钮时，input会将该值添加到原始值。

但增值必须打开和关闭。

HTML

<button id="toggle1" onclick="myFunction1()" class="1">Circle On</button>
<button id="toggle2" onclick="myFunction2()" class="2">Square On</button>
<button id="toggle3" onclick="myFunction3()" class="3">Border On</button>

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

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

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

脚本

document.getElementById('toggle1').onclick = function() {
        var txt  = ' circle',
            area = document.getElementById('text');

        area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}

document.getElementById('toggle2').onclick = function() {
        var txt  = ' square',
            area = document.getElementById('text');

        area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}

document.getElementById('toggle3').onclick = function() {
        var txt  = ' border',
            area = document.getElementById('text');

        area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}

Answer 1

您的所有输入ID值都相同， 如果你想点击试试时改变所有输入jquery

看看它

<pre>https://jsfiddle.net/6xyasx7u/</pre>

Answer 2

试试吧！

$('#myDiv1').attr("title", function(_ , currentAttr){
  return currentAttr + "your text";
});

Answer 3

我有答案。

＆＃13;

＆＃13;

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

function toggleText(text) {
  $(".text").each(function() {
    var totalArray = [' circle', ' square', ' border'];
    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;