Question

我看过很多关于这个话题的帖子。我担心的是，如果我在一个div中放置一个jquery会有可能吗？它就像一个div中的jquery，在jquery中使用select显示/隐藏div。考虑到有多个div，每个都有不同的jquery。如果可能，这将是什么样的正确语法？

Answer 1

使用

$(this).find(':selected').val()

而不是

$(this).val()

Answer 2

修改
正常页面结构：

<html> <head> <style /> <link /> </head> <body> <link /> <script> </script> </body> </html>

您应该将所有不在主体底部的文件中的j放置，这样页面就会被加载并显示内容。
如果你把js代码放在页面中，就像alert('hi');一样，一旦浏览器到达渲染点就会执行它，如果js代码指向未完成的html渲染节点（如在js代码之后插入的div），这就是为什么人们通常将代码包装在$( document ).ready(function() {}函数中以便在文档准备好后运行代码。
如果你想在一个事件之后运行一个特定的js（比如show a div），你必须把它包装在一个调用事件函数中（比如.change()或.onclick）。
基本上：

＆＃39;免＆＃39;代码将在页面到达该点后执行

＆＃39;包裹＆＃39;代码将在触发事件时执行

示例：

<div> <script> alert('hi');</script> </div>

一旦页面加载到达该点，代码就会执行，即使div是隐藏的也不是

<div id='test'> <script> $('#test').onclick(function(){alert('hi');})</script> </div>

一旦你点击了div，即使div被隐藏了，也会触发js 的 ORIGINAL

我还没有理解你的问题，但这些是可能性：

1）显示代码并隐藏/显示div ：JSFiddle - Running Example

HTML

<select id="choice"> <option value="1" selected>one</option> <option value="2">two</option> <option value="3">three</option> </select> <div id="1" class="hidden"> some codes <xmp><script>jquery 1 here...</script></xmp></div> <div id="2" class="hidden"> some codes <xmp><script>jquery 2 here...</script></xmp></div> <div id="3" class="hidden"> some codes <xmp><script>jquery 3 here...</script></xmp></div>

CSS：

.hidden{ display:none; } .chosen{ display:block; }

JS：

$(function() { $('#choice').change(function(){ if( $('.chosen').length >0){ $('.chosen').removeClass('chosen'); } $('#' + $(this).val()).addClass('chosen'); }); });

2）选择div时运行代码：JSFiddle - Running Example
HTML：

<select id="choice"> <option value="1" selected>one</option> <option value="2">two</option> <option value="3">three</option> </select>

JS：

$(function() { $('#choice').change(function(){ switch($(this).val()){ case '1': alert('1'); break; case '2': alert('2'); break; case '3': alert('3'); break; default: alert('error'); } //if/else structure /* var val=parseInt($(this).val()); if( val==1){ alert('1'); } else if(val==2){ alert('2'); } else{ alert('3'); }*/ }); });

Answer 3

以下是您正在寻找的一个示例...

<强> HTML：

<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
<option value="all">All Boxes</option>
</select>

<div id="boxes">
<div id="box1"><p>Box 1 stuff...</p></div>
<div id="box2"><p>Box 2 stuff...</p></div>
<div id="box3"><p>Box 3 stuff...</p></div>
</div>

<强> Jquery的：

 $(document).ready(function(){
    $('#box1').hide();
    $('#box2').hide();
    $('#box3').hide();
    $("#thechoices").change(function(){
    if(this.value == 'all')
    {$("#boxes").children().show();}
    else
    {$("#" + this.value).show().siblings().hide();}
    });

    $("#thechoices").change();
    });

使用jquery中的select显示/隐藏div

3 个答案:

Working Demo: