从LI和load元素获取名称

时间:2016-11-26 12:42:39

标签: javascript jquery

我的代码有问题,我把它放在这里。

我希望使用$(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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

试试这个:

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

而不是:

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

您可能想了解anchor jumping using JavaScript

你使用附加错误,它应该是:

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

而不是:

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

以下是追加功能的docs