Блог

Главная - Вопросы по программированию - Оператор If / else, обеспечивающий работу ссылки или отключенный

Оператор If / else, обеспечивающий работу ссылки или отключенный

#jquery #hyperlink

#jquery #гиперссылка

Вопрос:

Информация о рассматриваемой таблице:

 <tbody>
<tr class="table-link" data-href="http://jantzenproperties.dk/for-lejere/">
<td style="text-align: center;" align="left">Stuen th</td>
<td align="left">2 vær.</td>
<td align="left">66m2</td>
<td class="status" align="right">Udlejet</td>
</tr>
<tr class="table-link" data-href="http://jantzenproperties.dk/for-lejere/">
<td style="text-align: center;" align="left">Stuen mf</td>
<td align="left">2 vær.</td>
<td align="left">47m2</td>
<td class="status" align="right">Udlejet</td>
</tr>
<tr class="table-link" data-href="http://jantzenproperties.dk/for-lejere/">
<td style="text-align: center;" align="left">Stuen tv</td>
<td align="left">3 vær.</td>
<td align="left">81m2</td>
<td class="status" align="right">Ledig</td>
</tr>
</tbody>

В настоящее время я присваиваю строке таблицы класс в зависимости от ввода текста в td с классом ‘status’. Текст написан автором на WordPress. Классы используются для некоторых пользовательских CSS и, надеюсь, облегчают отключение ссылки для одного из них

 jQuery(document).ready(function( $ ){
$('.table-2 tr').addClass(function() {
  return $(this).find('.status').text();
});
});

В приведенном ниже коде я заставляю работать строку таблицы с классом table-link.

 jQuery(document).ready(function( $ ){
    $(".table-link").click(function() {
       window.document.location = $(this).data("href");
    });
});

Моя проблема в том, что у меня два разных статуса:

состояние 1: рабочая ссылка с именем ‘Ledig’.
состояние 2: отключена ссылка под названием ‘Udlejet’.

Могу ли я создать оператор if else, в котором рабочей ссылкой будет только статус 1?

Комментарии:

1. Откуда вы знаете, что что-то имеет статус 1 по сравнению со статусом 2?

2. У меня есть таблица с 4 tds, где у последнего есть класс под названием ‘status’. В этой ячейке записан либо status1, либо status2 — именно там первый скрипт добавляет это в tablerow в качестве класса

3. Хорошо, так if(theTrTheTableLinkIsInHasTheClassOfStatus2){ ...do not do the link... } ?

4. Да, что-то вроде этого. Но мне было интересно, возможно ли / лучше просто выполнить второй сценарий для status1 (рабочего), а не для status2 (отключенного)?

5. Если ваш первый скрипт запускается перед вторым, конечно, вы могли бы делегировать прослушиватель событий на .table-2 tr.status1

Ответ №1:

Вам нужен какой-то оператор if, может быть, что-то вроде:

 if($('.table-2 tr .status').val() =='Ledig'){
    $(".table-link").bind("click", function() {
        window.document.location = $(this).data("href");
    });
}

хотя вам, возможно, потребуется сделать это таким образом, чтобы он перебирал каждую строку таблицы.

Редактировать

Это работает:

 $(document).ready(function(){
  $(".table-2 tr").each(function(){
    if($(this).find(".status").html() == 'Ledig'){
      $(this).bind("click", function() {
        window.document.location = $(this).data("href");
      });
    }
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-2">
<tbody>
<tr class="table-link" data-href="http://jantzenproperties.dk/for-lejere/">
<td style="text-align: center;" align="left">Stuen th</td>
<td align="left">2 vær.</td>
<td align="left">66m2</td>
<td class="status" align="right">Udlejet</td>
</tr>
<tr class="table-link" data-href="http://jantzenproperties.dk/for-lejere/">
<td style="text-align: center;" align="left">Stuen mf</td>
<td align="left">2 vær.</td>
<td align="left">47m2</td>
<td class="status" align="right">Udlejet</td>
</tr>
<tr class="table-link" data-href="http://jantzenproperties.dk/for-lejere/">
<td style="text-align: center;" align="left">Stuen tv</td>
<td align="left">3 vær.</td>
<td align="left">81m2</td>
<td class="status" align="right">Ledig</td>
</tr>
</tbody>
</table>