无法让文本旋转点击

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 elem ents将被旋转。

还添加了一些转换。代码片段：

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

Answer 2

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

当点击没有汗水时，我得到了45deg的旋转记住尽管你只是将它应用到JQuery获取的第一个匹配，而不是全部。你的功能需要一点工作，以便你可以单独处理它们中的每一个。事情是这样的：

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

然后

function rotate(dom) { 
    dom.className += " rotate"; 
}