如何以更简单的方式运行几次 jquery 点击？

Question

你好，我写了这段代码，但我觉得它太乱了，我不太好用，你能帮帮我吗？

我想让我工作的人能够在他们在和不在的时候签到。

当我知道如何掌握点击功能后，我会尝试添加一个jquery.post功能，以便它可以保存在页面上。

var $plansHolders = $('#martinfri, #martinarbejd, #larsfri, #larsarbejd, #bentfri, #bentarbejd, #jacobfri, #jacobarbejd, #safri, #saarbejd, #steenfri, #steenarbejd, #dorthefri, #dorthearbejd, #jesperfri, #jesperarbejd, #hannefri, #hannearbejd').hide();
$('#martinfri').show();
$('.oversigt').click(function() {
  var href = $(this).attr('href');
  $plansHolders.hide();
  $(href).show();
});

<table border="1" style="width:100%">
  <tr>
    <th style="width:50%">Name</td>
    <th style="width:50%">Status</td> 
  </tr>
  <tr align="center">
    <td>Martin</td>
    <td>
<div id="martinfri" style="background-color:red;">
<a class='oversigt' href='#martinarbejd'>Off work</a></ul>
</div>
<div id="martinarbejd" style="background-color:lime;">
<a class='oversigt' href='#martinfri'>Working</a></ul>
</div>
</td> 
  </tr>

  <tr align="center">
    <td>Lars</td>
    <td>
<div id="larsfri" style="background-color:red;">
<a class='oversigt' href='#larsarbejd'>Off work</a></ul>
</div>
<div id="larsarbejd" style="background-color:lime;">
<a class='oversigt' href='#larsfri'>Working</a></ul>
</div>
</td> 
  </tr>

  <tr align="center">
    <td>Bent</td>
    <td>
<div id="bentfri" style="background-color:red;">
<a class='oversigt' href='#bentarbejd'>Off work</a></ul>
</div>
<div id="bentarbejd" style="background-color:lime;">
<a class='oversigt' href='#bentfri'>Working</a></ul>
</div>
</td> 
  </tr>

  <tr align="center">
    <td>Jacob</td>
    <td>
<div id="jacobfri" style="background-color:red;">
<a class='oversigt' href='#jacobarbejd'>Off work</a></ul>
</div>
<div id="jacobarbejd" style="background-color:lime;">
<a class='oversigt' href='#jacobfri'>Working</a></ul>
</div>
</td> 
  </tr>

  <tr align="center">
    <td>Steen-Allan</td>
    <td>
<div id="safri" style="background-color:red;">
<a class='oversigt' href='#saarbejd'>Off work</a></ul>
</div>
<div id="saarbejd" style="background-color:lime;">
<a class='oversigt' href='#safri'>Working</a></ul>
</div>
</td> 
  </tr>

  <tr align="center">
    <td>Steen</td>
    <td>
<div id="steenfri" style="background-color:red;">
<a class='oversigt' href='#steenarbejd'>Off work</a></ul>
</div>
<div id="steenarbejd" style="background-color:lime;">
<a class='oversigt' href='#steenfri'>Working</a></ul>
</div>
</td> 
  </tr>

  <tr align="center">
    <td>Dorthe</td>
    <td>
<div id="dorthefri" style="background-color:red;">
<a class='oversigt' href='#dorthearbejd'>Off work</a></ul>
</div>
<div id="dorthearbejd" style="background-color:lime;">
<a class='oversigt' href='#dorthefri'>Working</a></ul>
</div>
</td> 
  </tr>

  <tr align="center">
    <td>Jesper</td>
    <td>
<div id="jesperfri" style="background-color:red;">
<a class='oversigt' href='#jesperarbejd'>Off work</a></ul>
</div>
<div id="jesperarbejd" style="background-color:lime;">
<a class='oversigt' href='#jesperfri'>Working</a></ul>
</div>
</td> 
  </tr>

  <tr align="center">
    <td>Hanne</td>
    <td>
<div id="hannefri" style="background-color:red;">
<a class='oversigt' href='#hannearbejd'>Off work</a></ul>
</div>
<div id="hannearbejd" style="background-color:lime;">
<a class='oversigt' href='#hannefri'>Working</a></ul>
</div>
</td> 
  </tr>

</table>

Answer 1

您有一些无效的 html 代码。 <th> 以 </td> 而不是 </th> 结束还有许多 </ul> 从未打开过。

至于HTML就简单多了

这是一个例子

<table border="1" style="width:100%">
    <tr>
        <th style="width:50%">Name</th>
        <th style="width:50%">Status</th>
    </tr>
    <tr align="center">
        <td>Martin</td>
        <td id="martin">
            <a class='oversigt off-work btn' href='d'>Off work</a>
            <a class='oversigt working btn' href='#'>Working</a>
        </td>
    </tr>
    <tr align="center">
        <td>Lars</td>
        <td>
            <a class='oversigt off-work btn' href='d'>Off work</a>
            <a class='oversigt working btn' href='#'>Working</a>
        </td>
    </tr>
</table>

至于 CSS，您可以使用类作为颜色

.oversigt {
    display:block;
    text-decoration:none;
    color:#000;
}
.off-work {
    background:red;
}
.working {
    background:lime
}

现在，对于 javascript

$('.oversigt').hide(); // I don't understand why you hide everything
$('#martin .off-work').show(); // and only show Martin
$('.oversigt').on('click', function (e) {
    e.preventDefault(); //disables the click from executing the href
    var t = $(this); //better to save $(this) in a variable if you're going to use it more than once... not our case but good practice
    t.hide().siblings('.oversigt').show(); //the the item that's clicked, and show the one next it this one
});

Here's a fiddle

不确定我是否回答了你的问题，欢迎再次提问。

如何以更简单的方式 运行 几次 jquery 点击？

How can i run several jquery clicks in a simpler way?

jquery

click

如何以更简单的方式运行几次 jquery 点击？