javascript - 无法让文本在点击时旋转

Question

我一直在尝试让这个文本在我点击它所在的 div 后旋转，但无论我尝试什么，它都不起作用。任何帮助，将不胜感激。

HTML:

    <div class="list">
        <div class="listItem">Ash Gray<p>+</p></div>
        <div class="listItem"></div>
        <div class="listItem"></div>
        <div class="listItem"></div>
        <div class="listItem"></div>
    </div>

CSS:

.listItem {
width: calc(100% - 60\5px);
height: 53px;
padding: 1px;
margin-left: 60px;
margin-bottom: 5px;
background-color: #9265DC;
font-size:  1.5em;
text-align: left;
line-height: 55px;
color: #fff;
border: 1px solid #9265DC;
border-radius: 5px;
text-decoration: none;
}

.listItem p {
float: right;
line-height: 10px;
text-align: right;
margin-right: 10px;
font-weight: bolder;
}

.rotate {
-webkit-transform:rotate(45deg);
transform-origin: center;
}    

Javascript:

<script>
$(function(){
  $(".listItem").click(function(){
  $(".listItem p").toggleClass("rotate");
  });
});
</script>

Answer 1

我建议您改为通过 this 关键字引用被点击的元素，否则如果您点击一个元素，所有 p 元素 会旋转。

还添加了一些过渡。代码片段:

$(function() {
  $(".listItem").click(function() {
    $(this).find('p').toggleClass("rotate");
  });
});

.listItem {
  width: calc(100% - 60\5px);
  height: 53px;
  padding: 1px;
  margin-left: 60px;
  margin-bottom: 5px;
  background-color: #9265DC;
  font-size: 1.5em;
  text-align: left;
  line-height: 55px;
  color: #fff;
  border: 1px solid #9265DC;
  border-radius: 5px;
  text-decoration: none;
}

.listItem p {
  float: right;
  line-height: 10px;
  text-align: right;
  margin-right: 10px;
  font-weight: bolder;
  transition: all .3s ease;
}

.rotate {
  -webkit-transform: rotate(45deg);
  transform-origin: center;
  transition: all .3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="listItem">Ash Gray
    <p>+</p>
  </div>
  <div class="listItem">Misty
    <p>+</p>
  </div>
  <div class="listItem">Brock
    <p>+</p>
  </div>
  <div class="listItem"></div>
  <div class="listItem"></div>
</div>