rogo rogo - 15 days ago 9
Javascript Question

GET name from LI and load element

I have problem with my code i leave it here.

I want to get name of clicked element li using $(this) but i don't know why it doesn't work - i don't have any respond from attr name. Someone can explain me how it's work?

Thank you in advance for your answer. :)



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

Try this:

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

Instead of:

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

You might want to read about anchor jumping using JavaScript.


Also you are using append wrong, it should be:

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

Instead of:

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

Here is the docs for the append function.