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元素。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你添加了吗？你的脚本依赖于JQuery。我认为你有，但你没有把它放在上面，所以只需指出来。

当点击没有汗水时，我得+ +旋转45度。记住，虽然你只是将它应用于JQuery获得的第一场比赛，而不是全部。您的功能需要一些工作，以便您可以单独处理它们。像这样：

getPurchases

然后

<div class="listItem" onclick="rotate(this)">Ash Gray<p>+</p></div>

无法在单击时获取要旋转的文本

2 个答案: