JQuery问题:显示隐藏的对象

时间:2013-02-15 23:22:00

标签: jquery

我的代码是正确的。我想我的知识还不足以解决它,所以我想问你们其中一个人可能会修改我的代码。

所以我想要实现的目标:http://jsfiddle.net/yHHFJ/

$('[class^=is]').hide();
$("#select_2").change(function(){          
var value = $("#select_2 option:selected").val();
var theDiv = $(".is" + value);

theDiv.slideDown();
theDiv.siblings('[class^=is]').slideUp();
});

var $j = jQuery.noConflict();
function changesizedropdown(size){
var option = size;
var select = document.getElementById("select_2");
var opt, o = 0;
while (opt = select[o++]){
if (opt.value == option){ select.selectedIndex = o - 1; }
}
}

$j(document).ready(function () {

var swatch ='';
$j('#sizebox:eq(0) option').each(function() {swatch = swatch + "<li> <a    href='javascript:void(0)' onclick='changesizedropdown(&amp;quot;"+ $j(this).val() +"&amp;quot;);'>" + $j(this).text() + "</a></li>"});
var sizeswatchhtml = "<div class='size'><div style='float: left; margin: 6px 5px 0px 0px;'>SELECT SIZE : </div><div style='float: left; margin: 0pt 7px 0px 13px;'><ul>"+ swatch + " </ul></div></div>";
document.getElementById('sizeswatch').innerHTML = sizeswatchhtml;

});

我有一个带有S M L尺寸的选择和选项下拉菜单,我设法显示为单独的DIV。此外,我有隐藏的DIV(小,中,大),当我点击S(显示小),M(显示中)或L(显示大)时应显示,但它们没有出现,我正在努力制作没错。

你能帮帮我们吗?

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我对您的脚本进行了一些小的更改,现在看起来工作正常。

<script>

var $j = jQuery.noConflict();
$j('[class^=is]').hide();


$j("#select_2").change(function(){          
process();
});
function process()
{
var value = $j("#select_2 option:selected").val();
var theDiv = $j(".is" + value);
theDiv.slideDown();
theDiv.siblings('[class^=is]').slideUp();
}
function changesizedropdown(size){
var option = size;
var select = document.getElementById("select_2");
var opt, o = 0;
while (opt = select[o++]){
if (opt.value == option){select.selectedIndex = o - 1; process();}
}
}

$j(document).ready(function () {

var swatch ='';
$j('#sizebox:eq(0) option').each(function() {
swatch = swatch + "<li> <a href='javascript:void(0)' onclick='changesizedropdown(\""+       $j(this).val() +"\");'>" + $j(this).text() + "</a></li>"});
var sizeswatchhtml = "<div class='size'><div style='float: left; margin: 6px 5px 0px    0px;'>SELECT SIZE : </div><div style='float: left; margin: 0pt 7px 0px 13px;'><ul>"+ swatch + " </ul></div></div>";
document.getElementById('sizeswatch').innerHTML = sizeswatchhtml;

});

第一个变化是我使用了\&#34;代替&amp; quot;因为它给出了错误。

第二个变化是,即使在更改下拉列表的选择索引之后,其更改事件也未被触发,因此我已从函数changedizedropdown本身明确调用它。

第三个变化是我首先编写了noconflict语句,并且在$处使用$ j代替$。

感谢。

相关问题