Как я могу запустить несколько кликов 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 
} 

Теперь для яваскрипта

$('.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

Не уверен, ответил ли я на ваш вопрос, не стесняйтесь спрашивать.