LIからの名前を取得し、負荷要素

Question

私はここに私のコードに問題があります。

$（this）を使用してクリックした要素liの名前を取得したいのですが、なぜ動作しないのかわかりません - 私はattr名からの応答はありません。誰かが私にそれがどのように働いているのか説明できますか？

ご回答いただきありがとうございます。 :)

$(document).ready(function() { 
 
     $("li").click(function() { 
 
      var valueof = $(this).attr('name'); 
 
      document.getElementById("forms").style.display = "block"; 
 
      $("#forms").append= valueof; 
 
      $("#forms").load("all.php #"+valueof); 
 
     }); 
 
    });

#first { 
 
background-color: #f4511e; 
 
} 
 

 
#second { 
 
    background-color: #2c6f01; 
 
} 
 
#first, #second { 
 
    display: inline-block; 
 
    border-radius: 4px; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 28px; 
 
    padding: 20px; 
 
    width: 350px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
    vertical-align:middle 
 
} 
 

 
#first span, #second span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 

 
#first span:after, #second span:after { 
 
    content: '»'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 

 
#first:hover span, #second:hover span { 
 
    padding-right: 25px; 
 
} 
 

 
#first:hover span:after, #second:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
} 
 

 
.button:hover > ul { 
 
    display:block; 
 
} 
 

 

 
.button > ul { 
 
    display:none; 
 
    list-style-type:none; 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
.button > li > ul > li { 
 
    position:relative; 
 
    background-color:#EEE; 
 
} 
 

 
.button > ul > li:hover { 
 
    background-color:#99001A; 
 
} 
 

 
.button > ul > li:hover > a { 
 
    color:#E69F00; 
 
} 
 
#forms { 
 
    border-radius: 5px; 
 
    background-color: #f2f2f2; 
 
    padding: 20px; 
 
    color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="first" class="button" > 
 
    <span>Add values</span> 
 
    <ul> 
 
     <li name="student">Add student</li> 
 
     <li name="author">Add author</li> 
 
     <li name="title">Add title</li> 
 
    </ul> 
 
</button><br/> 
 
<div id="forms" style="display:none;"></div>

Answer 1

この試してみてください：あなたはについてanchor jumping using JavaScriptを読みたいかもしれません

$("#forms").load("all.php #"+valueof); 

：

location.href = ("#" + valueof); 

の代わりに。

---

はまた、あなたが間違って追加使用している、それは次のようになります。

​​

の代わりに：ここで

$("#forms").append = valueof; 

はアペンド機能のためのdocsです。