Javascript 多个Java脚本，应用于不同的<；ul>；及<；李>；标签_Javascript_Html_Html Lists

Javascript 多个Java脚本，应用于不同的<；ul>；及<；李>；标签

javascript html

Javascript 多个Java脚本，应用于不同的<；ul>；及<；李>；标签,javascript,html,html-lists,Javascript,Html,Html Lists,我对JavaScript非常陌生，如果这真的很愚蠢，我很抱歉。基本上，问题是我有两个Java脚本，都使用ul和li标记，但都需要它来完成不同的事情，那么我如何将它应用到不同的ul和li标记上呢这是一个更详细的问题我有两个JavaScript代码 (一) $（文档）.ready（函数（）{ $（'.verb ul li'）.focus（function（）{ $（'#隐藏动词'）.val（$（this.text（））； }); $（'.ulli'）.focus（函数（）{ $（'#隐藏的感

我对JavaScript非常陌生，如果这真的很愚蠢，我很抱歉。基本上，问题是我有两个Java脚本，都使用ul和li标记，但都需要它来完成不同的事情，那么我如何将它应用到不同的ul和li标记上呢

这是一个更详细的问题

我有两个JavaScript代码

(一)


$（文档）.ready（函数（）{
$（'.verb ul li'）.focus（function（）{
$（'#隐藏动词'）.val（$（this.text（））；
});
$（'.ulli'）.focus（函数（）{
$（'#隐藏的感觉'）.val（$（this.text（））；
});
$（'.形容词ul li'）。焦点（函数（）{
$（'#隐藏形容词'）.val（$（this.text（））；
});
$（'ul'）。环岛({
形状：'水车'，
最小产能：-1.0，
持续时间：300，
放松：“easeOutCubic”
});
$（'li'）.dblclick（函数（e）{
e、 预防默认值（）；
返回false；
});
$（'form'）。提交（函数（e）{
e、 预防默认值（）；
警惕（'谢谢你告诉我我的艺术作品是'+$（'#隐藏的形容词'）.val（）+'，为了改进它，我应该添加'+$（'#隐藏的动词'）.val（）+'，网站是'+$（'#隐藏的感觉'）.val（）+'）；
返回false；
});
});
'

然后（2）


jQuery（文档）.ready（函数（$）{
//我们只希望在启用javascript时应用这些样式
$（'div.navigation'）.css（{'width'：'300px'，'float'：'left'}）；
$（'div.content'）.css（'display'，'block'）；
//最初在拇指上设置不透明度并添加
//拇指悬停效果的附加样式
var onMouseOutOpacity=0.67；
$（'u#thumbs ul.thumbs li'）.opacityrollover({
mouseOutOpacity:onMouseOutOpacity，
鼠标不透明度：1.0，
fadeSpeed：“快”，
ExcemptionSelector:“.已选定”
});
//初始化高级Gallerific库
var gallery=$（“#拇指”）.gallerific({
延误：2500，
努姆坦布斯：15，
预测：10，
enableTopager:true，
enableBottomPager:正确，
maxPagesToShow:7，
imageContainerSel:“#幻灯片放映”，
controlsContainerSel:“#controls”，
captionContainerSel:“#caption”，
装载集装箱EL:“#装载”，
渲染器控件：true，
renderNavControls:true，
playLinkText:“播放幻灯片”，
PauseLink文本：“暂停幻灯片放映”，
prevLinkText:“&lsaqo；上一张照片”，
nextLinkText:“下一张照片”，
nextPageLinkText:“下一个&rsaquo；”，
prevPageLinkText:“&lsaqo；Prev”，
enableHistory:错误，
自动启动：错误，
对,，
默认转换持续时间：900，
onSlideChange：函数（prevIndex、nextIndex）{
//“this”指的是gallery，它是$（“#thumbs”）的扩展
this.find（'ul.thumbs'）.children（）
.eq（prevenindex）.fadeTo（'fast'，onMouseOutOpacity）.end（）
.eq（nextIndex）.fadeTo（'fast'，1.0）；
},
onPageTransitionOut:函数（回调）{
这个.fadeTo（'fast'，0.0，回调）；
},
onPageTransitionIn:函数（）{
这是fadeTo（'fast'，1.0）；
}
});
});
'

1号来自这里，2号来自这里

现在你可以看到，两者都使用ul和li，但（1）需要它，而（2）需要它，但我无法让it将不同的东西应用于两者。如果你看这些链接，你会发现它们有不同的用途。我曾尝试将id添加到标记和类中，但似乎不起作用

任何帮助都将不胜感激

谢谢

这是应用于HTML的两个部分

(一)


我的艺术作品是

创意
精致
可爱的
惊人
优雅的

，所以我要加上

音调
颜色
阴影
脸
着色

但在你离开之前，我想这个网站

清洁
惊人
差
平滑
过期

<script src="js/jquery.roundabout2.js"></script>
<script src="js/jquery.roundabout-shapes2.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
        $(document).ready(function() {
            $('.verb ul li').focus(function() {
                $('#hidden-verb').val($(this).text());
            });

            $('.feeling ul li').focus(function() {
                $('#hidden-feeling').val($(this).text());
            });

            $('.adjective ul li').focus(function() {
                $('#hidden-adjective').val($(this).text());
            });

            $('ul').roundabout({
                shape: 'waterWheel',
                minOpacity: -1.0,
                duration: 300,
                easing: 'easeOutCubic'
            });

            $('li').dblclick(function(e) {
                e.preventDefault();
                return false;
            });

            $('form').submit(function(e) {
                e.preventDefault();
                alert('Thank you for telling me that my art work is ' + $('#hidden-adjective').val() + ' ,and to improve it I should add ' + $('#hidden-verb').val() + ' and the website is ' + $('#hidden-feeling').val() + '.');
                return false;
            });
        });
    </script>'

<script type="text/javascript">
        jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            $('div.content').css('display', 'block');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
            });

            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
                delay:                     2500,
                numThumbs:                 15,
                preloadAhead:              10,
                enableTopPager:            true,
                enableBottomPager:         true,
                maxPagesToShow:            7,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play Slideshow',
                pauseLinkText:             'Pause Slideshow',
                prevLinkText:              '&lsaquo; Previous Photo',
                nextLinkText:              'Next Photo &rsaquo;',
                nextPageLinkText:          'Next &rsaquo;',
                prevPageLinkText:          '&lsaquo; Prev',
                enableHistory:             false,
                autoStart:                 false,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.fadeTo('fast', 0.0, callback);
                },
                onPageTransitionIn:        function() {
                    this.fadeTo('fast', 1.0);
                }
            });
        });
    </script>'

<div id="tellmeform"><form id="form2" action="" method="get">
      <div class="part"> My art work is</div>
            <div class="part moving adjective">
                <ul class="il1" id="ul1">
                    <li class="li1" id="li1">creative</li>
                    <li class="li1" id="li1">delicate</li>
                    <li class="li1" id="li1">lovely</li>
                    <li class="li1" id="li1">stunning</li>
                    <li class="li1" id="li1">elegant</li>
                </ul>
            </div>
            <div class="part">, so to imrpove I should add</div>
            <div class="part moving verb">
                <ul class="il1" id="ul1">
                    <li class="li1" id="li1">tones</li>
                    <li class="li1" id="li1">colour</li>
                    <li class="li1" id="li1">shadows</li>
                    <li class="li1" id="li1">faces</li>
                    <li class="li1" id="li1">shadeing</li>
                </ul>
            </div>              
            <div class="part">but before you go, I think the website is</div>
            <div class="part moving feeling">
                <ul class="il1" id="ul1">
                    <li class="li1" id="li1">clean</li>
                    <li class="li1" id="li1">stunning</li>
                    <li class="li1" id="li1">poor</li>
                    <li class="li1" id="li1"i>smooth</li>
                    <li class="li1" id="li1">expired</li>
                </ul>
            </div>
            <div class="part">.</div>
            <div class="part button">
                <input type="hidden" id="hidden-adjective" name="hidden-adjective" value="" />
                <input type="hidden" id="hidden-verb" name="hidden-verb" value="" />
                <input type="hidden" id="hidden-feeling" name="hidden-feeling" value="" />
                <input type="submit" value="Tell Me" name="post" id="post-it" />
            </div></form></div>'

<div id="gallery" class="content">
                <div id="controls" class="controls"></div>
                <div class="slideshow-container">
                    <div id="loading" class="loader"></div>
                    <div id="slideshow" class="slideshow"></div>
                </div>
                <div id="caption" class="caption-container"></div>
            </div>
            <div id="thumbs" class="navigation">
                <ul id="ul2" class="thumbs noscript">
                    <li id="li2">
                        <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
                            <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #0</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>
                    <li id="li2">
                        <a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
                            <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #2</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
                            <img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #3</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
                            <img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #4</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
                            <img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #5</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
                            <img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #6</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
                            <img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #7</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
                            <img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #8</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
                            <img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #9</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
                            <img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #10</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
                            <img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #11</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
                            <img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #12</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
                            <img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #13</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
                            <img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #14</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
                            <img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #15</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
                            <img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #16</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
                            <img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #17</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
                            <img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #18</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
                            <img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #19</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
                            <img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #20</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
                            <img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #21</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
                            <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #22</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
                            <img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #23</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>
                </ul>
          </div>
            <div style="clear: both;"></div>
         </div>'

        $('#ul1, #ul3, #ul4').roundabout({
            shape: 'waterWheel',
            minOpacity: -1.0,
            duration: 300,
            easing: 'easeOutCubic'
        });

        $('#li1, #li3, #li4').dblclick(function(e) {
            e.preventDefault();
            return false;
        });

            <ul class="il1" id="ul1">
            <li class="li1" id="li1">creative</li>
            <li class="li1" id="li1">delicate</li>
            <li class="li1" id="li1">lovely</li>
            <li class="li1" id="li1">stunning</li>
            <li class="li1" id="li1">elegant</li>
        </ul>
    </div>
    <div class="part">, so to imrpove I should add</div>
    <div class="part moving verb">
        <ul class="il1" id="ul3">
            <li class="li1" id="li3">tones</li>
            <li class="li1" id="li3">colour</li>
            <li class="li1" id="li3">shadows</li>
            <li class="li1" id="li3">faces</li>
            <li class="li1" id="li3">shadeing</li>
        </ul>
    </div>              
    <div class="part">but before you go, I think the website is</div>
    <div class="part moving feeling">
        <ul class="il1" id="ul4">
            <li class="li1" id="li4">clean</li>
            <li class="li1" id="li4">stunning</li>
            <li class="li1" id="li4">poor</li>
            <li class="li1" id="li4"i>smooth</li>
            <li class="li1" id="li4">expired</li>
        </ul>`