Как изменить текст метки при нажатии без кнопок? - PullRequest
Новая
       10

Как изменить текст метки при нажатии без кнопок?

0 голосов
/ 03 августа 2020

У меня есть таблица со сворачиваемыми ячейками, текст которой я хотел бы изменить при раскрытии. В частности, когда ячейки свернуты, рядом с текстом ячейки отображается знак «плюс» (чтобы сообщить пользователю, что есть еще что-то, что можно увидеть), и отображается текст «(Щелкните, чтобы развернуть ...)». Однако я хотел бы заменить знак плюса знаком минус при щелчке по ярлыку и стереть текст «(Щелкните, чтобы развернуть ...)».

Проблема, с которой я столкнулся, заключается в том, что значок знака «минус» и значок «плюс» появляются вместе и исчезают вместе, а не знак «минус», заменяющий знак «плюс», и наоборот. Как мне go заставить их заменять друг друга при каждом сворачивании / расширении?

Ниже приведен рабочий пример упрощенной версии моего кода: 

$(document).ready(function() {
  $('.hide').hide();
  $('[data-toggle="toggle"]').change(function() {
    $("label[for='" + this.id + "'] i.fa-plus-circle").toggle();
    $("label[for='" + this.id + "'] i.fa-minus-circle").toggle();
    $("label[for='" + this.id + "'] span").toggle();
    $(this).parents().next('.hide').toggle();
  });
});
[data-toggle="toggle"] {
  display: none;
}

.label {
  display: block;
}

.fa-minus-circle {
  display: none;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
  width: 100%;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<table>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="person">
            <i class="fa fa-plus-circle"></i>
            <i class="fa fa-minus-circle"></i>
            <b>Person</b>
            <span class="clicktoexpand">(Click to expand...)</span>
        </label>
        <input type="checkbox" id="person" data-toggle="toggle">
      </td>
    </tr>
  </tbody>

  <tbody class="hide">
    <tr>
      <td class="people">Jack</td>
      <td class="right cell" id="jack">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="people">Jill</td>
      <td class="right cell" id="jill">
        <span>0</span>
      </td>
    </tr>
  </tbody>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="place">
          <i class="fa fa-plus-circle"></i>
          <i class="fa fa-minus-circle"></i>
          <b>Place</b> 
          <span class="clicktoexpand">(Click to expand...)</span>
        </label>
        <input type="checkbox" id="place" data-toggle="toggle">
      </td>
    </tr>
  </tbody>
  <tbody class="hide">
    <tr>
      <td class="city">LA</td>
      <td class="right cell" id="nyc">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="city">NYC</td>
      <td class="right cell" id="nyc">
        <span>0</span>
      </td>
    </tr>
  </tbody>
</table>

Ответы [ 3 ]

1 голос
/ 03 августа 2020

Я добавил диапазон с классом вокруг вашего текста.

Я использовал функцию parent (), чтобы перейти к предыдущему тегу td и функцию find () для тега span, а также имя класса «закрыть» для вашего кнопка, чтобы проверить, закрыто ли оно или нет. 

$(document).ready(function() {
  $('.hide').hide();
  $('[data-toggle="toggle"]').click(function() {
    if($(this).is('.close')) {
       $(this).parent('td').find('b:first').text('Person (-)');
       $(this).parent('td').find('.textLabel').text('');
       $(this).removeClass('close');
    } else {
       $(this).parent('td').find('b:first').text("Person");   
       $(this).parent('td').find('.textLabel').text('(Click to expand...)');
       $(this).addClass('close');
    }
    $(this).parents().next('.hide').toggle();
  });
});
[data-toggle="toggle"] {
  display: none;
}

.label {
  display: block;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
  width: 100%;
}
<table>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="person">
           <i class="fa fa-plus-circle"></i>
           <b>Person</b> <span class="textLabel">(Click to expand...)</span>
        </label>
        <input type="checkbox" id="person" data-toggle="toggle" class="close">
      </td>
    </tr>
  </tbody>

  <tbody class="hide">
    <tr>
      <td class="people">Jack</td>
      <td class="right cell" id="jack">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="people">Jill</td>
      <td class="right cell" id="jill">
        <span>0</span>
      </td>
    </tr>
  </tbody>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="place">
                <i class="fa fa-plus-circle"></i>
                <b>Place</b> <span class="textLabel">(Click to expand...)</span>
              </label>
        <input type="checkbox" id="place" data-toggle="toggle" class="close">
      </td>
    </tr>
  </tbody>
  <tbody class="hide">
    <tr>
      <td class="city">LA</td>
      <td class="right cell" id="nyc">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="city">NYC</td>
      <td class="right cell" id="nyc">
        <span>0</span>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1 голос
/ 03 августа 2020

Вы можете поместить «(Щелкните, чтобы развернуть ...)» внутри <span>, а также добавить «<i class="fa fa-minus-circle"></i>» и скрыть его с помощью js. Затем просто переключите все вместе с «<i class="fa fa-plus-circle"></i>»

Готовый код: 

$(document).ready(function() {
  $('.hide').hide();
  $('.fa-minus-circle').hide(); //This hides the minus button
  $('[data-toggle="toggle"]').change(function() {
  
    //This takes the label of the same id as the input, so we can get their children. Afterwards we toggle everything.
    $("label[for='"+this.id+"'] i.fa-plus-circle").toggle()
    $("label[for='"+this.id+"'] i.fa-minus-circle").toggle()
    $("label[for='"+this.id+"'] span").toggle()

    $(this).parents().next('.hide').toggle();    
    
  });
});
[data-toggle="toggle"]{
  display: none;
}

.label {
  display: block;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
  width: 100%;
}
<table>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="person">
                <i class="fa fa-plus-circle"></i>
                
                <!-- New minus <i> -->
                <i class="fa fa-minus-circle"></i>
                
                <!-- Click to expand inside span <i> -->
                <b>Person</b> <span>(Click to expand...)</span>
              </label>
        <input type="checkbox" id="person" data-toggle="toggle">
      </td>
    </tr>
  </tbody>

  <tbody class="hide">
    <tr>
      <td class="people">Jack</td>
      <td class="right cell" id="jack">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="people">Jill</td>
      <td class="right cell" id="jill">
        <span>0</span>
      </td>
    </tr>
  </tbody>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="place">
                <i class="fa fa-plus-circle"></i>
                
                <!-- New minus <i> -->
                <i class="fa fa-minus-circle"></i>
                
                <!-- Click to expand inside span <i> -->
                <b>Place</b> <span>(Click to expand...)</span>
              </label>
        <input type="checkbox" id="place" data-toggle="toggle">
      </td>
    </tr>
  </tbody>
  <tbody class="hide">
    <tr>
      <td class="city">LA</td>
      <td class="right cell" id="la">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="city">NYC</td>
      <td class="right cell" id="nyc">
        <span>0</span>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1 голос
/ 03 августа 2020

Это почти то, о чем вы просили: 

if($(this).parents().next('.hide').is(':visible'))
    $(this).prev("label").text("-")
else
    $(this).prev("label").text("(Click to expand...)")

Он выбирает родственную метку, которая содержит текст, который вы хотите изменить, и проверяет, виден ли скрытый вами элемент, а затем изменяет текст внутри. поскольку «Персона» и «Место» являются частью текста меток, они перезаписываются. это может быть решено несколькими способами, один из которых заключается в том, чтобы вложить текст, который нужно изменить, в другой тег html и вместо изменения текста меток изменить текстовое содержимое этого тега, то есть заключить его в <span></span>. см .: 

$(document).ready(function() {
  $('.hide').hide();
  $('[data-toggle="toggle"]').change(function() {
    $(this).parents().next('.hide').toggle();
    if($(this).parents().next('.hide').is(':visible'))
        $(this).prev("label").find("span").text("-")
    else
        $(this).prev("label").find("span").text("(Click to expand...)")
  });
});
[data-toggle="toggle"] {
  display: none;
}

.label {
  display: block;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
  width: 100%;
}
<table>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="person">
                <i class="fa fa-plus-circle"></i>
                <b>Person</b> <span>(Click to expand...)</span>
              </label>
        <input type="checkbox" id="person" data-toggle="toggle">
      </td>
    </tr>
  </tbody>

  <tbody class="hide">
    <tr>
      <td class="people">Jack</td>
      <td class="right cell" id="jack">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="people">Jill</td>
      <td class="right cell" id="jill">
        <span>0</span>
      </td>
    </tr>
  </tbody>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="place">
                <i class="fa fa-plus-circle"></i>
                <b>Place</b> <span>(Click to expand...)</span>
              </label>
        <input type="checkbox" id="place" data-toggle="toggle">
      </td>
    </tr>
  </tbody>
  <tbody class="hide">
    <tr>
      <td class="city">LA</td>
      <td class="right cell" id="nyc">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="city">NYC</td>
      <td class="right cell" id="nyc">
        <span>0</span>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...