首页 \ 问答 \ 从jQuery插件代码中的ul ID访问li(Access li from ul ID inside jQuery plugin codes)

从jQuery插件代码中的ul ID访问li(Access li from ul ID inside jQuery plugin codes)

嗨我对jquery插件文档有点困惑: http//learn.jquery.com/plugins/basic-plugin-creation/

我的HTML标记:

    <ul id="slider1">
        <li><img src="images/slides/slide1.png" alt=""></li>
        <li><img src="images/slides/slide2.png" alt=""></li>
        <li><img src="images/slides/slide3.png" alt=""></li>
    </ul>

我的jquery脚本:

    $('#slider1').jSlider();

在我的jakeSlider.js脚本(自定义插件)

    (function($){
        $.fn.jSlider = function(){
          var $slidePos = 1;
          var $slideCount = $(this).find('li').length;
          var $next = $(this).find('a'); //FOR MY NEXT TEXT Hyperlink

          $(this).find('li:nth-child(' + $slidePos + ')').css('display', 'block');

          $($next).click(function(){
              $(this).find('li:nth-child(' + $slidePos + ')').fadeOut('slow');
              if($slidePos < $slideCount){
                  $slidePos += 1;
              }else{
                  $slidePos = 1;
              }
              $(this).find('li:nth-child(' + $slidePos + ')').fadeIn('slow');
             });
          };
    }(jQuery));

我的问题:如何访问或迭代ul中的列表索引? 我的意思是,我将沿着插件脚本访问'li'。


Hi I am a little bit confused on jquery plugin documentation stated here: http://learn.jquery.com/plugins/basic-plugin-creation/

My HTML markup:

    <ul id="slider1">
        <li><img src="images/slides/slide1.png" alt=""></li>
        <li><img src="images/slides/slide2.png" alt=""></li>
        <li><img src="images/slides/slide3.png" alt=""></li>
    </ul>

My jquery script:

    $('#slider1').jSlider();

on my jakeSlider.js script (Custom Plugin)

    (function($){
        $.fn.jSlider = function(){
          var $slidePos = 1;
          var $slideCount = $(this).find('li').length;
          var $next = $(this).find('a'); //FOR MY NEXT TEXT Hyperlink

          $(this).find('li:nth-child(' + $slidePos + ')').css('display', 'block');

          $($next).click(function(){
              $(this).find('li:nth-child(' + $slidePos + ')').fadeOut('slow');
              if($slidePos < $slideCount){
                  $slidePos += 1;
              }else{
                  $slidePos = 1;
              }
              $(this).find('li:nth-child(' + $slidePos + ')').fadeIn('slow');
             });
          };
    }(jQuery));

My Question: How could I access or iterate the list index inside the ul? I mean, I will access the 'li' inside along plugin scripts..


原文:https://stackoverflow.com/questions/19791619
更新时间:2022-05-15 06:05

最满意答案

使用具有visibility = hiddenvisibility = visible insted的div。

<div id ="image" visibility = "hidden">

    <asp:Image ID="AlertPic" runat ="server" ImageUrl="~/images/i_AlertWarning.png" />
    <asp:Label ID="lblError" runat ="server" CssClass="errorMessage"></asp:Label>

</div>

现在只需将带有id图像的div设置为可见或隐藏,因为它默认是隐藏的


use a div with visibility = hidden OR visibility = visible insted.

<div id ="image" visibility = "hidden">

    <asp:Image ID="AlertPic" runat ="server" ImageUrl="~/images/i_AlertWarning.png" />
    <asp:Label ID="lblError" runat ="server" CssClass="errorMessage"></asp:Label>

</div>

now just set the div with id image to visible or hidden as it stands it is hidden by default

相关问答

更多
  • 使用
  • 您可以标记任何语句,包括带标签的语句。 标签只在标记语句中的某个位置是中断或继续有意义的上下文时才执行有用的操作。 从而 pointless: var x = 0; 语法上没问题,但标签不能(不能)做任何事情。 为了能够break标签, break需要在标签声明中。 如上例所示, break不能在var声明的“内部”,这就是为什么它没用。 但是,这是有效的,并且是break的典型用法: outerLoop: for (var i = 0; i < matrix.length; ++i) { for ( ...
  • 你在document.getElementById()取name你的cb应该是txt206451 ( ID属性 )而不是name属性。 要么 你可以通过document.getElementsByName()来获得它 var cb = document.getElementsByName('field206451')[0]; // First one 要么 var cb = document.getElementById('txt206451'); 并将值设置为隐藏用途document.getEleme ...
  • 更改 document.getElementById('lblFile1').value 至 document.getElementById('lblFile1').innerHTML 这允许标签的内容(HTML范围)解释您放置的HTML链接。 还要检查输出,因为ASP.NET可能会在输出时更改您的asp:Label ID。 将ClientIDMode设置为“static”将解决此问题。 确保您选择的ID不与具有相同ID的任何其他节点冲突。 Change document.getElementById( ...
  • 它是一个标签,它没有价值,它有HTML内容 document.getElementById('<%=msgFeedback.ClientID %>').innerHTML = "Unable to locate the given resort"; It's a label, it doesn't have a value, it has HTML content document.getElementById('<%=msgFeedback.ClientID %>').innerHTML = "Unab ...
  • 要在视口顶部找到一个元素:遍历所有元素,直到找到el.getBoundingClientRect().bottom为负的元素(参见MDN )。 通过将结果与视口的大小进行比较(例如,边界矩形的top大于窗口的客户端大小),可以应用更通用的解决方案来寻找包括侧面或底部的多个标准。 To find an element off the top of the view port: iterate through all elements until you find one where el.getBoundin ...
  • 我认为这是一个XY问题。 我不认为你想改变这个标签。 我想你有一个服务双重责任的文本框。 如果标签说了一件事,文本框包含的数据意味着一件事; 如果标签说另外一些,文本框包含一些其他数据。 这是一种非常不寻常的方式来完成一个非常常见的Web UX。 相反,创建一系列标签/文本框对并将它们包含在DIV元素中。 隐藏所有的DIV,但其中一个。 当你想“改变”标签时,取消隐藏包含你想要的标签/文本框的DIV,并隐藏其他所有内容。 当表单发回服务器时,所有三个文本框也会回发。 服务器可以知道显示哪个标签,因为它的文本 ...
  • 使用具有visibility = hidden或visibility = visible insted的div。
  • asp.net控件上的Visible="false" 导致无法在页面上呈现控件 。 你在这里尝试做的是渲染它,但用css样式让用户隐藏它直到使用javascript显示它。 要归档不使用Visible,但将样式或css设置为Panel。 asp.Panel渲染为div ...
  • 如果您可以通过它的id定位input ,则应该可以定位标签,因为它的属性应该与输入的id匹配。 使用jQuery,你可以像这样匹配: $('label[for=order_payments_attributes_1362416152585_date]') 并隐藏它你只需在上面的选择器上调用.hide() $('label[for=order_payments_attributes_1362416152585_date]').hide(); 生成字段/标签时,您似乎做错了,因为属性的标签不应显示为orde ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)