如何使用javascript删除附加值

我的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>

是必需的

为了解决这个问题，当我单击toggle1时，它会添加一个圆圈。但当我点击toggle2时，它将添加正方形并删除圆形。对于其他按钮，反之亦然

有人能帮我吗

我使用的代码模型：

试试这个

$('#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 
    });
}

---

每次单击按钮时，可以将inputItem值重置为“主页”

inputItem.value = "home"; 

---

JSFiddle:

这是我一直在寻找的答案

$（'#toggle1，#toggle2，#toggle3，#toggle4'）。单击（函数（）{
toggleText（this.innerHTML.toLowerCase（））；
});
函数切换文本（文本）{
$（“.text”）.each（函数（）{
var totalArray=['圆'、'方'、'边框'、'突发']；
if（$（this）.val（）.indexOf（text）！=-1）{
var regex1=新的RegExp（文本“”）；
$（this.val（$（this.val（）.replace）（regex1，“”）；
log（“在替换“+$（this.val（））之后）；
}否则{
//log（“在替换“+$（this.val（））之后）；
$（this.val（$（this.val（）+“”+文本）；
//log（“在替换“+$（this.val（））之后）；
}
totalArray.splice（totalArray.indexOf（text），+1）；
log（totalArray）；
var regex2=new RegExp（totalArray.join（“|”）”）；
console.log（regex2）；
$（this.val（$（this.val（）.replace）（regex2，“”））；
});
}
$（文档）.ready（函数（）{
$（“button.cirkel”）。单击（函数（）{
$（“.icon”）.removeClass（“边框”）；
$（“.icon”）.removeClass（“方形”）；
$（“.icon”）.toggleClass（“圆”）；
$（“button.cirkel”）.toggleClass（“on”）；
$（“button.vierkant”）.removeClass（“on”）；
$（“button.rand”）.removeClass（“on”）；
});
$（“button.vierkant”）。单击（函数（）{
$（“.icon”）.removeClass（“边框”）；
$（“.icon”）.toggleClass（“方形”）；
$（“.icon”）.removeClass（“圆圈”）；
$（“button.cirkel”）.removeClass（“on”）；
$（“button.vierkant”）.toggleClass（“on”）；
$（“button.rand”）.removeClass（“on”）；
});
$（“button.rand”）。单击（函数（）{
$（“.icon”）.toggleClass（“边框”）；
$（“.icon”）.removeClass（“方形”）；
$（“.icon”）.removeClass（“圆圈”）；
$（“button.cirkel”）.removeClass（“on”）；
$（“button.vierkant”）.removeClass（“on”）；
$（“button.rand”）.toggleClass（“on”）；
});
$（“#uitleg切换”）。单击（函数（）{
美元（“#uitleag”）。toggleClass（“zichtbaar”）；
});
$（“输入：文本”）.focus（函数（）{
$（this.select（）；
});
});
正文{
字体系列：Arial、Helvetica、Verdana、无衬线字体；
}
保险商实验室{
填充：0；
利润率：10px0；
}
李{
列表样式类型：无；
显示：块；
左：0；
保证金：5px0 5px0；
职位：相对；
浮动：左；
}
钮扣{
宽度：100px；
边界半径：7px；
高度：40px；
字体大小：20px；
边界：0px；
保证金：10px 10px 10px 0；
颜色：#FFF；
背景色：#D95021；
边界：3px起点#EA6C40；
显示：块；
浮动：左；
光标：指针；
大纲：无；
}
按钮：悬停{
背景色：#F9794D；
}
.在{
背景色：#5DC55D！重要；
颜色：#FFF！重要；
边界：3px起点#6BD46B；
}
.图标{
高度：66px！重要；
宽度：66px！重要；
保证金：0自动；
字体大小：55px！重要；
填充：10px！重要；
文本对齐：居中；
}
输入{
边界半径：10px；
填充：10px；
边框：1px实心#dedede；
字体大小：16px；
文本转换：大写；
}
.圆圈{
边界半径：80px！重要；
显示：块；
边框：3px实心#FF0066；
背景色：#FF0066；
过渡：所有0.5s立方贝塞尔（.74，-1.16，.2，2.16）0s；
光标：指针；
文字装饰：无；
颜色：#FFF！重要；
}
.圆圈：悬停{
背景色：#FFF；
边框：3px实心#FF0066；
颜色：#FF0066！重要；
}
.广场{
边界半径：10px！重要；
显示：块；
背景色：#FF0066；
边框：3px实心#FF0066；
过渡：所有0.5s立方贝塞尔（.74，-1.16，.2，2.16）0s；
光标：指针；
文字装饰：无；
颜色：#FFF！重要；
}
.square:悬停{
背景色：#FFF；
边框：3px实心#FF0066；
背景色：#FFF；
颜色：#FF0066！重要；
}
.边界{
边界半径：80px！重要；
边框：3px实心#FF0066；
显示：块；
背景色：#FFF；
过渡：所有0.5s立方贝塞尔（.74，-1.16，.2，2.16）0s；
光标：指针；
文字装饰：无；
颜色：#FF0066！重要；
}
.边界：悬停{
背景色：#FF0066！重要；
颜色：#FFF！重要；
}

单击以添加一个类，查看它在使用额外类名时的外观。
圆圈
广场
边境


1.


2.


3.


4.


5.


6.


7.


8.


9


10


11


12


13


14


15


16


17


18


感谢您的回复。但它已经用我的多德做到了这一点。我的意思是，当我点击一个按钮时，它会添加圆形、方形或边框。但当我点击其他按钮时，它必须删除插入的值，只显示新值。这就是我想要的，但home必须留在那里。它必须适用于多个输入字段。就像我的explanation@Dionoh我已经分享了更新的提琴和更新的代码，再次查看帖子（可能是刷新）并查看上面的内容comment@Dionoh在fiddle中查看演示，所有输入字段都将更新。你所说的
是指多个输入字段
？我有多个输入字段，它必须将该文本添加到它已有的defealt值旁边。它不应取代文本。加上
inputItem.value = "home";