Question

我需要能够单击一个元素，获取该元素的ID并将其用于其他功能。我该怎么做，因为无法使用$(this)。这是我到目前为止的内容：

$("#pills-ficha").on("click", closePillsOnClick);

function closePillsOnClick() {
  var clickedId = $(this).attr("id");
  var clickedIdChild = $(this).html($(this).html().split("By:").join(""));

  if ($(clickedId).hasClass("active")) {
    $(clickedId).removeClass("active show");
    e.stopPropagation();
    $(clickedIdChild).removeClass("active show").css("display", "none");
  } else {
    $(clickedIdChild).css("display", "block");
    $(clickedIdChild).siblings().css("display", "none");
  }
}

/ *编辑* /

我将添加标记：

<div class="d-flex flex-nowrap align-items-center">
                        <ul id="examples" class="nav nav-pills justify-content-center justify-content-lg-start" role="tablist">
                            <span class="text-blue font-weight-medium">EJEMPLOS:</span>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="pills-ficha-tab" data-toggle="pill" href="#pills-ficha" role="tab" aria-controls="pills-ficha" aria-selected="false">Ficha</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="pills-candidato-tab" data-toggle="pill" href="#pills-candidato" role="tab" aria-controls="pills-candidato" aria-selected="false">Mail candidato</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="pills-empresa-tab" data-toggle="pill" href="#pills-empresa" role="tab" aria-controls="pills-empresa" aria-selected="false">Mail empresa</a>
                            </li>
                        </ul>
                    </div>  
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center tab-content" id="pills-tabContent">
                  <div class="tab-pane fade" id="pills-ficha" role="tabpanel" aria-labelledby="pills-ficha-tab">
                    <img src="img/gold/gold-ejemplo-ficha.jpg" alt="Ejemplo de ficha">
                  </div>
                  <div class="tab-pane fade" id="pills-candidato" role="tabpanel" aria-labelledby="pills-candidato-tab">
                    <img src="img/gold/gold-ejemplo-candidato.jpg" alt="Ejemplo de mail al candidato">
                  </div>
                  <div class="tab-pane fade" id="pills-empresa" role="tabpanel" aria-labelledby="pills-empresa-tab">
                    <img src="img/gold/gold-ejemplo-empresa.jpg" alt="Ejemplo de mail a la empresa">
                  </div>
                </div>
            </div>

Answer 1

您的逻辑的主要问题是因为attr('id')使您返回pills-ficha，而这本身不是有效的选择器。您需要在其上附加#才能使其正常工作。

但是这是一个有缺陷的方法。您已经通过this关键字引用了元素本身。创建对该元素的引用以获取其id，然后通过该id获得对该元素的另一个引用是完全没有意义的。

这样，您可以简化如下逻辑：

$("#pills-ficha").on("click", closePillsOnClick);

function closePillsOnClick() {
  var $clicked = $(this);
  var clickedIdChild = $clicked.html($clicked.html().split("By:").join(""));

  if ($clicked.hasClass("active")) {
    e.stopPropagation();
    $clicked.removeClass("active show");
    $(clickedIdChild).removeClass("active show").hide();
  } else {
    $(clickedIdChild).show().siblings().hide()
  }
}

很可能您可以使用clickedIdChild引用执行相同的操作，但是您的HTML显示的信息不足以让我提供如何解决该问题的示例。

Answer 2

我原来的问题是这部分：

const INITIAL_STATE = { scoreList:[]};

 export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
         case ADD_SCORE:
            return {...state, scoreList: {...state.scoreList, ...action.payload}}

    }
    return state;
}

必须是：

var clickedIdChild = $(this).html($(this).html().split("By:").join(""));

还添加：

$（“＃” + clickedIdChild）作为选择器。

然后按预期运行：

var clickedIdChild = clickedId.split(":By").join("");

Answer 3

好的，让我们澄清一下。 var clickedId = $(this).attr("id");将以fakeId的形式返回ID。接下来，您有一个ID为（$(clickedId)）的jQuery，在我的示例中为$('fakeId')。 ID选择器需要以#开头，因此您必须添加它。因此有效的代码将是$('#' + clickedId)。更多内容：

干杯。

获取clicked元素的ID并将其用作$（this）

3 个答案: