jquery if 语句隐藏元素-6ren

jquery if 语句隐藏元素

转载作者：行者123 更新时间：2023-12-01 01:02:56

25

4

我似乎不知道如何简单地在第一个 div 上隐藏“上一个”按钮，在最后一个 div 上隐藏“下一个”按钮 .

希望有专业人士愿意帮助新手。这是我的代码:

<!DOCTYPE html>
<html>
<head>
  <style>
      div { width:40px; height:40px; margin:10px; float:left; border:2px blue solid; padding:2px; }
      span { font-size:14px; }
      p { clear:left; margin:10px; }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div></div>
  <p><button id="prev">Prev</button></p>
  <p><button id="next">Next</button></p>
    <script type="text/javascript">
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#prev").click(function () {
            $curr = $curr.prev();
            $("div").css("background", "");
            $curr.css("background", "#f99");
        });
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#next").click(function () {
            $curr = $curr.next();
            $("div").css("background", "");
            $curr.css("background", "#f99");
        });
    </script>
</body>
</html>

最佳答案

我对您的标记进行了轻微修改，该修改反射(reflect)了解决此类问题的传统方法。

<div class="boxes">
    <div>F</div>
    <div>E</div>
    <div>W</div>
    <div class="active">L</div>
    <div>X</div>
</div>
<p><button id="prev">Prev</button></p>
<p><button id="next">Next</button></p>

请注意所有 div 元素周围的容器 .boxes。此外，请注意，我们不再使用 id，而是使用一个类 (.active) 来跟踪我们当前的位置。

// When the #prev or #next buttons within a p are clicked
$("p").on("click", "#prev, #next", function(e){
    // Find reference to current active element, and remove class
    var active = $(".active").removeClass("active");
    // If we have an active element
    active.length
        // Determine direction of action 
        ? $(this).prop("id") === "prev"
              // If the #prev button was clicked, move back a sibling
              ? active.prev().addClass("active")
              // If the #next button was clicked, move forward a sibling
              : active.next().addClass("active")
        // No active element? Set the first child as active
        : $(".boxes :first-child").addClass("active");  
    // Show or hide #prev and #next based on active element location
    $("#prev").toggle( !$(".active").is(":first-child") );
    $("#next").toggle( !$(".active").is(":last-child") );
// Trigger this on load to setup active element if not already present
}).find("#prev").trigger("click");

fiddle :http://jsfiddle.net/txpj2/2/

关于jquery if 语句隐藏元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10678069/

25

4

0

文章推荐： jQuery Datatables 对来自 ajax 源的列进行重新排序

文章推荐： jquery - 复选框和文本字段 jQuery

文章推荐： jQuery:将 json 响应的编码设置为 utf8

java - 想要创建 if 语句，然后是几个 else-if 语句，最后是一个 "capture-all"else-语句
创建一个“海盗对话”，可以选择左手或右手。我希望它对“左”和“右”的不同拼写做出积极的回答(正如您将在代码中看到的那样)，但是，当我为所有非“右”或“左”的输入添加最终的“else”代码时，它给了我一
VBS教程：VBScript 语句-With 语句
With 语句对一个对象执行一系列的语句。 With object statements End With 参数 object 必需的部分
VBS教程：语句-While...Wend 语句
While...Wend 语句当指定的条件为 True 时，执行一系列的语句。 While condition &nbsp； Version [stat
python - 在同一行上创建 for 语句，但不在下一个输入上创建 for 语句
所以我正在处理的代码有一个小问题。 while True: r = input("Line: ") n = r.split() if r == " ":
javascript - 嵌套 if 语句 - 如何重构条件以在迭代时使用一个 if 语句
我有一个对象数组: var contacts = [ { "firstName": "Akira", "lastName": "Laine", "number"
c - 在函数中有两个return 语句，将执行哪个return 语句？
int main() { int f=fun(); ... } int fun() { return 1; return 2; } 在上面的程序中，当从main函数中调用一个
ios - Switch 语句 VS If 语句
我的项目中有很多 if 语句、嵌套 if 语句和 if-else 语句，我正在考虑将它们更改为 switch 语句。其中一些将具有嵌套的 switch 语句。我知道就编译而言，switch 语句通常更
VBS教程：VBScript 语句-Rem 语句
Rem 语句包含程序中的解释性注释。 Rem comment 或 ' comment comment 参数是需要包含的注释文本。在 Rem 关键字和 comment 之间应有一个空格。
VBS教程：VBScript 语句-ReDim 语句
ReDim 语句在过程级中声明动态数组变量并分配或重新分配存储空间。 ReDim [Preserve] varname(subscripts) [, varname(subscripts)]
VBS教程：VBScript 语句-Randomize 语句
Randomize 语句初始化随机数生成器。 Randomize [number] number 参数可以是任何有效的数值表达式。说明 Randomize 使用 number 参数初始
VBS教程：VBScript 语句-Public 语句
Public 语句定义公有变量并分配存储空间。在 Class 块中定义私有变量。 Public varname[([subscripts])][, varname[([subscripts])
VBS教程：VBScript 语句-Sub 语句
Sub 语句声明 Sub 过程的名称、参数以及构成其主体的代码。 [Public [Default]| Private] Sub name [( arglist )]
VBS教程：VBScript 语句-Set 语句
Set 语句将对象引用赋给一个variable或property，或者将对象引用与事件关联。 Set objectvar = {objectexpression | New classname
javascript - 我在一个 for 循环中有两个 if 语句，为什么有时会在第一个语句之前运行第二个 if 语句？
我有这个代码块，有时第一个 if 语句先运行，有时第二个 if 语句先运行。我不确定为什么会这样，因为我认为 javascript 是同步的。 for (let i = 0; i < dataObje
javascript - 为什么这段代码不起作用？ Javascript if 语句，else if 语句
这是一个 javascript 代码，我想把它写成这样:如果此人回答是，则回复“那很酷”，如果此人回答否，则回复“我会让你开心”，如果此人回答的问题包含"is"或“否”，请说“仅键入”是或否，没有任何
java - 短 if 语句 "inside"短 if 语句
这是我的任务，我尝试仅使用简短的 if 语句来完成此任务，我得到的唯一错误是使用“(0.5<=ratio<2 )”，除此之外，构造正确吗？ Scanner scn = new Scanner(
postgresql - SELECT 语句中的 SQL 语句 If 语句
有没有办法在 select 语句中使用 if 语句？我不能在这个中使用 Case 语句。实际上我正在使用 iReport 并且我有一个参数。我想要做的是，如果用户没有输入某个参数，它将选择所有实例。
java - switch 语句 vs if 语句，哪个对性能更好？
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: If vs. Switch Speed 我将以 C++ 为例，但我要问的问题不是针对特定语言的。我的意思是一
VBS教程：VBScript 语句-Property Set 语句
Property Set 语句在 Class 块中，声明名称、参数和代码，这些构成了将引用设置到对象的 Property 过程的主体。 [Public | Private] Pro
VBS教程：VBScript 语句-Property Let 语句
Property Let 语句在 Class 块中，声明名称、参数和代码等，它们构成了赋值（设置）的 Property 过程的主体。 [Public | Private] Prop

首页

博学

6Ren·AI

商城

jquery if 语句隐藏元素