Question

我有一个菜单项，我想通过设置一个类来更改我们单击的菜单项的bg颜色。是否可以在不使用ID引用的情况下执行此操作？例如：如果我点击菜单4，该功能应该只设置一个类li。

<ul class="navList">
    <li onclick="setActive();">menu 1</li>
    <li onclick="setActive();">menu 2</li>
    <li onclick="setActive();">menu 3</li>
    <li onclick="setActive();">menu 4</li>
    <li onclick="setActive();">menu 5</li>
</ul>

Answer 1

将this（引用当前元素）传递到setActive函数中。从那里，您可以使用函数中的引用来设置背景颜色（现在称为obj）：

function setActive(obj) {
    obj.style.backgroundColor = 'blue';
}

李：

<li onclick="setActive(this);">menu 1</li>

Answer 2

检查代码段

function setActive (obj) {
    obj.style.background="red";
}

<ul class="navList">
  <li onclick="setActive(this);">menu 1</li>
  <li onclick="setActive(this);">menu 2</li>
  <li onclick="setActive(this);">menu 3</li>
  <li onclick="setActive(this);">menu 4</li>
  <li onclick="setActive(this);">menu 5</li>
</ul>

Answer 3

将事件绑定到ul元素并使用event.target

访问目标LI

在jQuery中，它很简单，可以按如下方式完成：

$(".navList").on("click", "li", function () {
    $(".navList li").removeClass("bgColor");
    $(this).addClass("bgColor");
});

查看下面的jsFiddle链接，了解jQuery和非jquery实现：

非jquery版本（vanilla js）： https://jsfiddle.net/bkf8k4fq/1/

jQuery版本： https://jsfiddle.net/bkf8k4fq/2/

Answer 4

许多可能性，我展示了一个完整的手：

＆＃13;

 public void btn1_click (View v) {
    String currentTextData = tvresult.getText().toString();
    if(android.text.TextUtils.isEmpty(currentTextData)) {
       Toast.makeText(getApplicationContext(), "Enter value 1", Toast.LENGTH_SHORT).show();
    } else {
          int value = 0;
          try {
             value = Integer.parseInt(currentTextData);
          } catch(Exception e) {}
          value = value + 1;
          String updatedValue = String.valueOf(value);
          tvresult.setText(updatedValue);
    }

}

public void btn2_click (View v){
    String currentTextData = tvresult.getText().toString();
    if(android.text.TextUtils.isEmpty(currentTextData)) {
       Toast.makeText(getApplicationContext(), "Enter value 2", Toast.LENGTH_SHORT).show();
    } else {
          int value = 0;
          try {
             value = Integer.parseInt(currentTextData);
          } catch(Exception e) {}
          value = value + 2;
          String updatedValue = String.valueOf(value);
          tvresult.setText(updatedValue);
    }
}

public void btnAdd_click (View v){
    if(SystemClock.elapsedRealtime() - mlastClickTime < 1000){
        return;
    }
    mlastClickTime = SystemClock.elapsedRealtime();
    String val1 = tvresult.getText().toString();
    val1 = val1 + "+";
    add = true;
    tvresult.setText(val1);

}

public void btnEqual_click(View v) {
    if (add) {
        val1 += val2;
        tvresult.setText(val1);
    }
}

＆＃13;

// you used onclick attribute - which is bad practice for js and messes up the html part, better go for:
document.getElementById("l").addEventListener(
  "click", function() {
    clickCalledFunction(this);
  }
);

function clickCalledFunction(t) {
  event.preventDefault();//don't do return false but prevent the link following href

  var tag=document.getElementsByTagName("a");
  alert("byTagName: " + tag + " " + tag[0].innerHTML );
  tag[0].textContent="counting: 1";//textContent will be updated late 
  
  var c=document.getElementsByClassName("link");
  alert("byClassName: " + c[0].innerHTML );
  //c[0].textContent="counting: 2";
  
  var name=document.getElementsByName("anchor");
  alert("byName: " + name[0]);
  //name[0].textContent="counting: 3";
  
  alert("byEventMember: " + t.innerHTML )
  
  alert(t.href);
  // now do the link yourself maybe:
  //window.location.href=t.href;
}

＆＃13;

如何在不使用ID的情况下访问/编辑HTML元素

4 个答案: