Question

我正在尝试创建一个可重用的函数，可以在按钮组中的第一个和最后一个按钮上调用该函数，以更改中心按钮的innerHTML。按钮组如下所示：|-| 0个卧室| + |。我在选择活动元素（即“-”或“ +”按钮）时遇到了麻烦，因此我可以遍历具有要更改的innerHTML的中央按钮中的跨度。

当我使用element.id作为查询的基础时，它可以工作并且可以访问所需的span元素，但是当我尝试使用active元素作为基础时，它将失败。我需要它是关系性的而不是特定的，因为我将在不同的元素上使用该函数。

这是我的JavaScript：

function incDec(i) {
  var thisElem = document.activeElement;
  var getNum = $(thisElem)
      .parent()
      .parent()
      .children(".disabled")
      .children("span")
      .html();
  var count = Number(getNum);
  if (i.value == "4") {
    count -= 1;
    getNum = count;
    $(thisElem)
      .parent()
      .parent()
      .children(".disabled")
      .children("span")
      .empty()
      .append(count);
  } else if (i.value == "5") {
    count += 1;
    getNum = count;
    $(thisElem)
      .parent()
      .parent()
      .children(".disabled")
      .children("span")
      .empty()
      .append(count);
  } else {
  }

}

这是html：

    <div class="btn-group btn-group-toggle pr-4 pt-3 pb-3" data- 
    toggle="buttons">

        <label for="minButton1" class="btn btn-outline-info plus-minus minus">
            <input class="test" type="radio" name="options" id="minButton1" 
            value="4" onclick="incDec(this)"> -
        </label>

        <label class="btn btn-outline-info info-sect disabled">
            <input type="radio" name="bedrooms" id="bedrooms" 
            autocomplete="off">

                <span class="num" id="beds">0</span> Bedrooms
        </label>

        <label for="plusButton1" class="btn btn-outline-info plus-minus plus">

            <input class="test" type="radio" id="plusButton1" 
            name="formselector" value="5" onclick="incDec(this)"> +
        </label>

    </div>

如何在我的代码中选择活动元素？

0 个答案: