クリック時に回転するテキストを取得できません

Question

私はこのテキストを回転させようとしていますが、私が試したことに関係なく、動作しません。どんな助けもありがとう。

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キーワードでクリックされた要素を参照するためにあなたをお勧めします、あなたは他のクリックした場合1つの要素上で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>

Answer 2

を追加したことがありますか？あなたのスクリプトはJQueryに依存します。私はあなたが持っていると思うが、あなたはそれを上に置かなかったので、それを指摘しなければならなかった。

汗がかからないときに+ 45度回転するようになっていますが、最初の試合にのみ適用していますが、すべてではありません。関数を個別に処理できるように、関数には少しの作業が必要です。このような何か：

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

、その後

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