草庐IT

javascript - jQuery 切换 - 图标切换点击？

coder 2023-08-11 原文

我正在尝试创建一个 jQuery 切换播放和暂停图标，我想在点击时切换图标。

注意:

我的演示代码运行良好，但我正在寻找类似这样的功能...如果我点击第一个播放图标，它就会改变。当我点击第二个 Play Icon 时，它将更改为 Pause Icon 然后第一个 Pause Icon 将更改为 Play Icon 并且它将与第三个图标一起重复。

演示代码:

$("#infoToggler").click(function() {
    $(this).find('img').toggle();
});
$("#infoToggler2").click(function() {
    $(this).find('img').toggle();
});
$("#infoToggler3").click(function() {
    $(this).find('img').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="infoToggler"><img src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/>
<img src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/>
</div>

<div id="infoToggler2"><img src="http://c28.imgup.net/play-icon223d.png
" width="60px" height="60px"/>
<img src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/>
</div>

<div id="infoToggler3"><img src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/>
<img src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/>
</div>

我在 Stack Overflow 上找到了这些链接，但它们不是我要找的。

jQuery Toggle on click of image

How to jQuery toggle multiple images on different button click?

最佳答案

首先，使用类而不是 ID，然后您只需要一个处理程序，而不是多个。所以，给 div 一个类。

接下来，给“重置”图像一个类别，另一个类别不同。这允许您重置其他人。

然后您可以向 div 添加一个处理程序来切换该 div 中的图像并重置所有其他的:

 $(".toggler").click(function() {
    
        // Reset all images
        $(".toggler img.alt").hide();
        $(".toggler img.orig").show();
        
        // Now toggle the ones in this .toggler
        $("img", this).toggle();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class='toggler'>
        <img class='orig' src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/>
        <img class='alt'  src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/>
    </div>

    <div class='toggler'>
        <img class='orig' src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/>
        <img class='alt'  src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/>
    </div>

    <div class='toggler'>
        <img class='orig' src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/>
        <img class='alt'  src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/>
    </div>

关于javascript - jQuery 切换 - 图标切换点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38461789/

javascriptjQuery34sectionstronghtmlcssimage

有关javascript - jQuery 切换 - 图标切换点击？的更多相关文章

  1. ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2

    我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案 是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h

  2. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  3. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  6. ruby - Sinatra:点击 URL 时运行 ruby​​ 代码 - 2

    我想在每次访问url/code时运行一个脚本(code.rb)。如何运行脚本？require'sinatra'get'/'do#runthescriptend 最佳答案 要么fork另一个进程:system('rubycode.rb')...或者简单地将脚本加载到当前上下文中:load'code.rb'#*not*require 关于ruby-Sinatra:点击URL时运行ruby​​代码，我们在StackOverflow上找到一个类似的问题： https:

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

  9. jquery - Rails 如何创建 Jquery flash 消息而不是默认的 Rails 消息 - 2

    我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]

  10. ruby - 难倒点击与 nokogiri 和 Mechanize 的链接 - 2

    也许我做错了，或者还有另一种更有效的方法。这是我的问题:我首先使用nokogiri打开一个html文档并使用其css遍历该文档，直到找到我需要单击的链接。现在我有了链接后，如何使用Mechanize来点击它？根据文档，Mechanize.new返回的对象是字符串或Mechanize::Page::Link对象。我不能使用字符串-因为可能有100个相同的链接-我只想Mechanize点击nokogiri遍历的链接。有什么想法吗？ 最佳答案 找到所需的链接节点后，您可以手动创建Mechanize::Page::Link对象，然后单击它:

随机推荐