根据作为参数传递给javascript的值更改div样式

时间:2015-08-20 07:52:41

标签: javascript jquery html css onclick

这里是我试过的javascript

function toggle(clicked_id,name) {
			alert(clicked_id);
			alert(name);
			var text = document.getElementById("clicked_id");
			var ele = document.getElementById("name");
			alert(ele.style.display);
			if(ele.style.display == "block") {
		    		ele.style.display = "none";
				text.innerHTML = "+";
				text.value="+"
		  	}
			else {
				ele.style.display = "block";
				text.innerHTML = "-";
				text.value="-"
			}
			return
		} 

和html是

<input type="button" id="displayText1" onClick="return toggle(this.id,this.name)" value="+" style="margin-left:86%;" name="toggleText1">
							
							<div id="toggleText1" style="display: none"><h1>Wallet Info Here</h1></div>	</div>

<input type="button" id="displayText2" onClick="toggle(this.id,this.name)" value="+" style="margin-left:86%;" name="toggleText2">
							
							<div id="toggleText2" style="display: none"><h1>Wallet Info Here</h1></div>	</div>

我试过这个,但只提醒我得到..没有改变div风格。这不是改为隐藏或显示模式

3 个答案:

答案 0 :(得分:1)

问题是:

var text = document.getElementById(clicked_id);
var ele = document.getElementById(name);

你必须在没有引号的情况下使用它。

<input type="button" id="displayText1" onClick="toggle(this)" value="+" style="margin-left:86%;" name="toggleText1">

<input type="button" id="displayText2" onClick="toggle(this)" value="+" style="margin-left:86%;" name="toggleText2">

还有更好的方法,你可以这样做:

this

只需在参数中传递function toggle(el) { var text = el; var ele = document.getElementById(el.name); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "+"; text.value="+" } else { ele.style.display = "block"; text.innerHTML = "-"; text.value="-" } } ,就可以像这样更改函数:

return

由于您不需要返回任何内容,它只是一个dom操作内容,因此您可以删除toggle()语句。

我建议你避免使用内联事件处理程序,所以如果你对不引人注目的javascript感兴趣,那么你可以将这个事件处理程序放在一个带有document.getElementById('displayText1').addEventListener('click', function(){ toggle(this); }); document.getElementById('displayText2').addEventListener('click', function(){ toggle(this); }); 函数的js文件中,你可以使用它:

querySelectorAll

或使用document.querySelectorAll('#displayText1, #displayText2').addEventListener('click', function(){ toggle(this); }); 方法:

var t = $('#section1').offset().top - 100;
var t1 = $('#section2').offset().top - 100;
var navigation = $('.topbar');
$(document).scroll(function(){
    if($(this).scrollTop() > t1) {   
        navigation.css({
         'background-color':'#FF0000'
         });
    } else if($(this).scrollTop() > t) {   
        navigation.css({
         'background-color':'#660066'
         });
    } else {
        navigation.css({
         'background-color':'#eee'
         });
    }
});

答案 1 :(得分:0)

只需删除变量名称旁边的引号

var text = document.getElementById(clicked_id);
var ele = document.getElementById(name);

DEMO

答案 2 :(得分:-1)

变量周围的引号&#34; clicked_id&#34;和&#34;名称&#34;使它们充当字符串。并且没有这些id的元素。 只需删除引号即可解决问题。

var text = document.getElementById(clicked_id);

var ele = document.getElementById(name);