Question

我有一个链接列表，每个链接都有自己的分数和上/下投票按钮。

点击投票按钮后，我想将该曲目的所有颜色改为绿色/红色。

    <ul id = "tracklist">
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link1.com">Track 1</a>
            <p class = "trackscore">10 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link2.com">Track 2</a>
            <p class = "trackscore">5 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link3.com">Track 3</a>
            <p class = "trackscore">0 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link4.com">Track 4</a>
            <p class = "trackscore">0 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
    </ul>

因此，如果我要点击第2首曲目的upvote按钮，我怎么能改变它包含＆＃34; trackwrap＆＃34;？

的风格属性？

问题是我不知道如何只选择包含点击按钮的特定li。我对javascript很陌生，所以这是一个知道google什么的问题，所以如果问题已经存在，我很抱歉。

该列表将自动生成，因此我无法为每个li分配ID并使用getElementById。

Answer 1

这样做，更改类或将CSS添加到单击的.upvote

的父级

$(".upvote").click(function(){

   $(this).parent().css({"color":"#0f0"});
   // or $(this).parent().addClass("green");

});

Answer 2

你已经标记了你的问题jquery，所以我猜测你是直接使用jQuery连接按钮：

$(".upvote").on("click", function() {
    // ...
});
// (And similar for downvote)

或使用委托（在这种情况下我会使用）：

$("#tracklist").on("click", ".upvote", function() {
    // ...
});
// (And similar for downvote)

无论哪种方式，在单击按钮时对处理程序的回调中，this将引用被单击的按钮。那么$(this).closest(".trackwrap")将为您提供该按钮所在的.trackwrap：

var trackwrap = $(this).closest(".trackwrap");

...然后你可以添加/删除类或其他任何东西来设置li的颜色。

你可以也使用.parent，因为.trackwrap是按钮的直接父级，但这很脆弱：对HTML结构的微小改动会破坏它。只要按钮位于.closest范围内，即使您将其他元素置于其间，也可以使用.trackwrap。

附注：如果您想要访问特定.trackscore中的.trackwrap，可以使用find中的.trackwrap：

var trackscore = trackwrap.find(".trackscore");

示例：

// In this case, I'm using delegated handlers
$("#tracklist").on("click", "button.upvote", function() {
  var trackwrap = $(this).closest(".trackwrap");
  // Here I'm just forcing it green, but you probably have more
  // you want to do, hence the note about .trackscore above
  trackwrap.toggleClass("good", true).toggleClass("bad", false);
});
$("#tracklist").on("click", "button.downvote", function() {
  var trackwrap = $(this).closest(".trackwrap");
  // Here I'm just forcing it red, but you probably have more
  // you want to do, hence the note about .trackscore above
  trackwrap.toggleClass("good", false).toggleClass("bad", true);
});

.good {
  background-color: #008000;
}
.bad {
  background-color: #800000;
}

<ul id = "tracklist">
  <li class = "trackwrap">
    <a  class = "tracklink" href="https://www.link1.com">Track 1</a>
    <p class = "trackscore">10 points</p>
    <button class = "upvote" type="button">+</button>
    <button class = "downvote" type="button">-</button>
  </li>
  <li class = "trackwrap">
    <a  class = "tracklink" href="https://www.link2.com">Track 2</a>
    <p class = "trackscore">5 points</p>
    <button class = "upvote" type="button">+</button>
    <button class = "downvote" type="button">-</button>
  </li>
  <li class = "trackwrap">
    <a  class = "tracklink" href="https://www.link3.com">Track 3</a>
    <p class = "trackscore">0 points</p>
    <button class = "upvote" type="button">+</button>
    <button class = "downvote" type="button">-</button>
  </li>
  <li class = "trackwrap">
    <a  class = "tracklink" href="https://www.link4.com">Track 4</a>
    <p class = "trackscore">0 points</p>
    <button class = "upvote" type="button">+</button>
    <button class = "downvote" type="button">-</button>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

如果您点击该按钮，则可以在功能中this或event.target引用该按钮。由于DOM结构是分层的，因此按钮实际上是li的子节点。因此，如果您使用parentElement，您将选择正确的元素。

演示：

//CODE TO ATTACH CLICK HANDLERS TO ALL BUTTONS
   Array.prototype.map.call(document.getElementById("tracklist").querySelectorAll("button"), function(element){
        element.addEventListener("click", setVote, false);
   });
//

function setVote(e) //e for event;
{
  var voteCount;
  if (e.target.textContent == "+")
    {
      voteCount = 1;
    }
  else
    {
      voteCount = -1;
    }
  
  var parent = e.target.parentElement;  
  parent.querySelector("p.trackscore").textContent = parseInt(parent.querySelector("p.trackscore").textContent) + voteCount + " points";

  if (parseInt(parent.querySelector("p.trackscore").textContent) < 0)
    {
      parent.className = "trackwrap bad";
      }
  else
    {
      parent.className = "trackwrap good";
    }
  
    
}

.trackwrap {
  background-color: white;
}

.trackwrap.good {
  background-color: lime;
}

.trackwrap.bad {
  background-color: red;
}

    <ul id = "tracklist">
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link1.com">Track 1</a>
            <p class = "trackscore">10 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link2.com">Track 2</a>
            <p class = "trackscore">5 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link3.com">Track 3</a>
            <p class = "trackscore">0 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link4.com">Track 4</a>
            <p class = "trackscore">0 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
    </ul>

Answer 4

如果你使用jquery：

$('.upvote').on('click', function(event)
                {
                    event.preventDefault();
                    $(this).parent().css("background-color", "green");
                    //Also, if you have defined a css class you can use addClass("myclass"); instead of css()
                });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id = "tracklist">
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link1.com">Track 1</a>
            <p class = "trackscore">10 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link2.com">Track 2</a>
            <p class = "trackscore">5 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link3.com">Track 3</a>
            <p class = "trackscore">0 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link4.com">Track 4</a>
            <p class = "trackscore">0 points</p>
            <button class = "upvote" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
    </ul>

Answer 5

首先，在按钮上添加一个onclick监听器：

    <li class = "trackwrap">
        <a  class = "tracklink" href="https://www.link1.com">Track 1</a>
        <p class = "trackscore">10 points</p>
        <button class = "upvote" onclick="upvote(this)" type="button">+</button>
        <button class = "downvote" type="button">-</button>
    </li>

然后在函数中：

 function upvote(btn) {
     var parentElement = btn.parentElement;

     // use parentElement to edit DOM
     parentElement.style.color = "red";
 }

单击包含在所述类中的按钮时如何影响特定类

5 个答案: