草庐IT

javascript - JS 切换其他元素的可见性和更改 css

coder 2023-08-09 原文

我敢肯定这非常简单，但我是 JS 的新手，我想知道执行此操作的最佳方法，而不是通过变通办法解决它。

所以我有一个 div block ，当按下它上方的文本字段时，它的可见性会切换。

<h3 onclick="javascript: toggle1();">
  <span style="cursor:pointer">
    <b>Text1</b>
  </span>
</h3>

<div id="Text1" hidden="hidden">blahblah</div>

然后我有我的 JS:

function toggle1() {
  $('#Text1').toggle(1000);
}

这很好用，但是当用户单击标题文本时，我还想更改 <hr> 的高度上面的元素

<hr id="line1" style="height:2px;border:none;color:#03930f;background-color:#03930f;" />

我试过添加:

if($('#Text1').is(':visible')) {
  document.getElementById("line1").style.height = "15px";
}
else { 
  document.getElementById("line1").style.height = "2px"; 
}

但这不起作用...我假设是因为 toggle() 函数不会切换 is(':visible') 相同的东西条件正在检查中。

正确的做法是什么？

最佳答案

回答 - 第一关

.toggle 确实影响元素的 :visible 状态，但是给它一个持续时间(1000) 它不是立即发生的，这意味着如果您希望在它完成后发生某些事情，则需要在可选的回调中提供它:

$('#Text1').toggle(1000,function(){
    if($('#Text1').is(':visible')) {
        document.getElementById("line1").style.height = "15px";
    }
    else { document.getElementById("line1").style.height = "2px"; }
});

答案 - 第二遍

您正在混合使用 jquery 和 vanilla javascript - 虽然这在本质上没有任何问题，但有点令人困惑。坚持一个或另一个。有用的是，在回调中，您可以使用 $(this) 引用元素，并且您已经知道可以使用 #elementId

通过 id 定位元素 
$('#Text1').toggle(1000,function(){
    if($(this).is(':visible')) {
         $('#line1').css('height','15px');
    }
    else { 
         $('#line1').css('height','2px');
    }
});

答案 - 第三遍

与上述一致，您不应该在 html 中混合使用 jquery 和老式的事件处理程序 - 如果您正在编写，请再次坚持使用 jQuery

<h3><span style="cursor:pointer"><b>Text1</b></span></h3>
<div id="Text1" hidden="hidden">blahblah</div>
<hr id="line1" style="height:2px;border:none;color:#03930f;background-color:#03930f;" />

和

$('h3').on('click',function(){
    $('#Text1').toggle(1000,function(){
        if($(this).is(':visible')) {
             $('#line1').css('height','15px');
        }
        else { 
             $('#line1').css('height','2px');
        }
    });
});

更新的 jsfiddle:http://jsfiddle.net/xLxsctfk/3/

关于javascript - JS 切换其他元素的可见性和更改 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32606152/

javascriptcsscode3934jqueryhtml

有关javascript - JS 切换其他元素的可见性和更改 css的更多相关文章

  1. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  2. ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2

    如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设

  3. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  4. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  5. 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

  6. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  7. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

  8. ruby - 即时确定方法的可见性 - 2

    我正在编写一个方法，它将在一个类中定义一个实例方法；类似于attr_accessor:classFoocustom_method(:foo)end我通过将custom_method函数添加到Module模块并使用define_method定义方法来实现它，效果很好。但我无法弄清楚如何考虑类(class)的可见性属性。例如，在下面的类中classFoocustom_method(:foo)privatecustom_method(:bar)end第一个生成的方法(foo)必须是公共(public)的，第二个(bar)必须是私有(private)的。我怎么做？或者，如何找到调用我的cust

  9. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。

  10. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

随机推荐