在不影响其他元素的情况下更改卡片的标题。

Question

我想把卡的标题改一下，它的标题是 Main Title 变成 2nd Title 每当用户在下拉菜单中选择一个选项时。

这是我的代码。

HTML。

<h3 id="title" class="card-title">Main Title <span class="badge badge-primary" 
id="counts">0</span>
<span class="float-right">
<a href="" style="color: #c0c6cc;"><i 
class="mdi mdi-trash-can"></i>
</a>
</span>
</h3>
<select class="form-control" id="select" onchange="optionCheck(this);" required>
<option value="yor1"
Option 1 </option>
<option value="yor2">
Option 2</option>
<option value="yor3">
Option 3</option>
</select>

如果用户选择选项3，卡片的标题就会改变。

JS:

function optionCheck(that) {
if (that.value == "yor3") {
alert("Title changed!");
    document.getElementById("title").innerHTML = "2nd Title";
}
else {
    document.getElementById("title").innerHTML = "Main title";
}
}

现在的问题是，如果我选择选项1或2，只能看到主标题的字样，而且图标消失了。

Answer 1

你可以把你的内容放在 span 并赋予该ID title 到 span 标签，这样只有 span 内的内容才会被改变。

演示代码:

function optionCheck(that) {
  if (that.value == "yor3") {
    alert("Title changed!");
    document.getElementById("title").innerHTML = "2nd Title";
  } else {
    document.getElementById("title").innerHTML = "Main title";
  }
}

   <!--added id to span tag-->
<h3 class="card-title"><span id="title">Main Title</span> <span class="badge badge-primary" id="counts">0</span>
  <span class="float-right">
<a href="" style="color: #c0c6cc;"><i 
class="mdi mdi-trash-can"></i>
</a>
</span>
</h3>
<select class="form-control" id="select" onchange="optionCheck(this);" required>
  <option value="yor1"> Option 1 </option>
    <option value="yor2">
      Option 2</option>
    <option value="yor3">
      Option 3</option>
</select>

Answer 2

这里是工作代码。https:/jsfiddle.netusmanmunirc9uqktn319。

超文本标记语言

 <h3 id="title" class="card-title">Main Title</h3>
     <span class="badge badge-primary" id="counts">0</span>
      <span class="float-right">
        <a href="" style="color: #c0c6cc;">
        <i class="mdi mdi-trash-can"></i></a>
      </span>
    <br>
    <select class="form-control" id="select" onchange="optionCheck(this);" required>
      <option disabled selected></option>
      <option value="yor1">Option 1</option>
      <option value="yor2">Option 2</option>
      <option value="yor3">Option 3</option>
    </select>

JS

function optionCheck(that) {
  if (that.value === "yor1" || that.value === "yor2" || that.value === "yor3") {
      document.getElementById("title").innerHTML = "2nd Title";
  } else {
      document.getElementById("title").innerHTML = "Main title";
  }
}