I have looked but have not found a specific answer for changing just one attribute. Here is an example I cooked: I only want to change the display attribute.
<html>
<head>
<title>
test
</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a.move {
height: 25px;
width: 25px;
display: inline-block;
border: 1px #aaa solid;
border-radius: 5px;
text-align: center;
text-decoration: none;
color: black;
}
a.move:hover {
background-color: #aaa;
}
---v This is the important css part
li {
display: inline-block;
width: 370px;
border: 1px #aaa solid;
}
---v This is the important css part
</style>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var current = 1;
var wait = 0;
function next(){
current++;
update();
}
function prev(){
current--;
update();
}
---v This is the important jquery part
function update(){
$('p').text(current);
$('li').each(function(index) {
if(index != current)
$(this).css('display','none');
else
$(this).css('display','inline');
});
}
end of the important part ---^
$(function(){
update();
$('a.move.left').click(function(e){
if(wait) return;
e.preventDefault();
prev();
});
$('a.move.right').click(function(e){
if(wait) return;
e.preventDefault();
next();
});
});
</script>
</head>
<body>
<p> ... </p>
<a class="move left" href="a"><</a> <a class="move right" href="b">></a></br>
<ul>
<li>123</li><!--
--><li>123</li><!--
--><li>456</li><!--
--><li>789</li><!--
--><li>abc</li><!--
--><li>edf</li><!--
--><li>ghj</li><!--
--><li>!@#</li><!--
--><li>$%^</li><!--
--><li>ABC</li>
</ul>
</body>
</html>
Please advise. Currently, what happens is that it removes all the other css attributes. I could set all the attributes every time but I do not wish to.
Thanks
-
Don't quite understand which li do you want to change but you are using the each function which changes each of every li element.Shawn Ang– Shawn Ang2012年06月19日 08:52:55 +00:00Commented Jun 19, 2012 at 8:52
-
Could you explain in more detail the "removes all the other CSS attributes" part of the question? It seems to be OK in this demoandyb– andyb2012年06月19日 08:54:59 +00:00Commented Jun 19, 2012 at 8:54
4 Answers 4
Modifying the css directly is (in most cases) not a good option.
instead either use:
$(this).show() and $(this).hide()
or (my personal preference, since this is even more flexible):
$(this).toggleClass("...") and create according CSS-classes in your stylesheet.
Additionaly, you are changing the css of ALL you liitems: $('li').each - is this really what you want?
The .css() method only changes the css-attribute you specify - it does not override other styles. If this seems to be the case, the problem probably lies somewhere else in your code.
3 Comments
inline declaration with losing the width but then i forgot to write this in my answer;)Use
$(this).toggle()
or If you want to show or hide use show and hide as you required.
$(this).show()
$(this).hide()
Comments
Instead of that, why now use:
$(this).show() or $(this).hide() as needed... ot $(this).toggle() ....
Comments
In jquery you can hide or show elements using:
$(this).show() or $(this).hide() instead of changing the css.