Если текст HTML равен значению, нажмите изменить

ProgramBox

Если текст HTML равен значению, нажмите изменить

Post author:admin
Запись опубликована:16 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Хорошо, я попробовал несколько способов сделать это, но ничего не сработало. Я надеюсь, что кто-нибудь здесь может сказать мне, что я делаю неправильно. Ниже приведен пошаговый пример того, чего я пытаюсь достичь.

#info-NUMBER-btn отображает Click to display more information .
#info-NUMBER Для CSS установлено значение display: none .

При #info-NUMBER-btn нажатии:
— Соответствующие #info-NUMBER-btn дисплеи Click to display less information .
— Установлен соответствующий #info-NUMBER CSS display: inline-block .

 /* Jquery */

$(document).ready(function() {
    	$("#info-1-btn").text("Click to display more information");
    	$("#info-2-btn").text("Click to display more information");
    	$("#info-3-btn").text("Click to display more information");
    	$("#info-4-btn").text("Click to display more information");
    	$("#info-5-btn").text("Click to display more information");
    	
    	if($("#info-1-btn").text("Click to display more information")) {
    		$("#info-1-btn").click(function () {
    			$(this).text("Click to display less information");
    			$("#info-1").css("display", "inline-block");
    		});
    	} else if($("#info-1").text("Click to display less information")) {
    		$("#info-1-btn").click(function() {
    			$(this).text("Click to display more information");
    			$("#info-1").css("display", "none");
    		});
    	}
    	
    	
    	if($("#info-2-btn").text("Click to display more information")) {
    		$("#info-2-btn").click(function () {
    			$(this).text("Click to display less information");
    			$("#info-2").css("display", "inline-block");
    		});
    	} else {
    		$("#info-2-btn").click(function() {
    			$(this).text("Click to display more information");
    			$("#info-2").css("display", "none");
    		});
    	}
    	
    	
    	if($("#info-5-btn").text("Click to display more information")) {
    		$("#info-5-btn").click(function () {
    			$(this).text("Click to display less information");
    			$("#info-5").css("display", "inline-block");
    		});
    	} else {
    		$("#info-5-btn").click(function() {
    			$(this).text("Click to display more information");
    			$("#info-5").css("display", "none");
    		});
    	}
    });

 <!-- HTML -->
<div id="info-5" class="hire-equipment-more-information">
  <table class="hire-equipment-more-information-table" cellpadding="15px">
    <tr>
      <th>Length:</th>
      <th>Material:</th>
      <th>HP:</th>
    </tr>
    <tr>
      <td>7.5m</td>
      <td>Aluminium</td>
      <td>225</td>
    </tr>
  </table>
</div>
<br />
<a id="info-5-btn" class="hire-equipment-item-link"></a>

1. Вы должны выполнять инструкции if в вашем обработчике событий click, а не так, как вы делаете это сейчас. Также, делая $('#id').text('text') это, вы устанавливаете текст элемента. Я предлагаю вам вернуться к основам…

2. Вы не должны привязывать события щелчка на основе текстового содержимого элемента. Вместо этого прослушайте события щелчка, а ЗАТЕМ определите, какое действие выполнить. Действие может быть определено с помощью скрытой переменной или атрибута данных, который хранит состояние переключения содержимого.

3. @Terry Это может быть глупый вопрос, но я все еще новичок в этом. Как бы мне добавить атрибут данных, хранящий состояние переключения?

Ответ №1:

Вы могли бы сделать это намного проще для себя, привязав не к идентификатору элемента, а к использованию вашего класса hire-equipment .

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

Как только вы нажмете на обработчик событий, вы можете использовать первый аргумент функции, чтобы проверить, с какой кнопки вы переходите, и выполнить соответствующее действие.

В качестве примера я только что создал 5 элементов и 1 обработчик событий.

Он $(selector).click() будет привязан ко всем элементам, совместно использующим селектор (в моем случае hire-equipment ), а затем проверит, с какой кнопки он идет, выберите родительский узел (div, окружающий кнопку, заголовок и описание), выполните поиск элемента описания и переключите его скрытый класс. Затем текст кнопок будет меняться в зависимости от его текста.

Ваш пример построен не полностью, но это пример того, как сделать ваши обработчики событий немного более универсальными.

 $('.hire-equipment').click(function(event) {
  var sourceElement = $(event.target);
  $(sourceElement).parent().find('.description').toggleClass('hidden');
  if ($(sourceElement).text() === 'Show more information') {
    $(sourceElement).text('Show less information');
  } else {
    $(sourceElement).text('Show more information');
  }
});

 .hidden {
  display: none;
  visibility: hidden;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>

Ответ №2:

Давайте рассмотрим эту строку кода

 if($("#info-1-btn").text("Click to display more information")) {

Это должно быть:

 if($("#info-1-btn").text() === "Click to display more information")) {

text Функция является перегруженной функцией. Если вы не передадите никакого значения, он вернет вам текст внутри элемента.

Если вы передадите значение, оно изменит текст и снова вернет объект jQuery (который будет истинным значением).

Теперь давайте посмотрим на вашу общую логику.

Ваш код проверяет состояние кнопок один раз, когда загружается документ. Он должен проверять состояние кнопки как часть обработчика кликов.

Смотрите этот полный пример кода: http://plnkr.co/edit/HLsLcKrRY3OqK6w44bXp?p=preview

Это может не совсем соответствовать вашим требованиям, но оно демонстрирует, как вы проверяете состояние кнопки внутри обработчика кликов.

Он также демонстрирует, как вы можете использовать пользовательский атрибут (в данном случае data-target ), чтобы связать кнопку с блоком div.

 <!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>

<body>
  <button class="toggleButton" data-target="buttonOneInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonOneInfo">
    Here's some information about the first item
  </div>
  <button class="toggleButton" data-target="buttonTwoInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonTwoInfo">
    Here's some information about the second item
  </div>
  <button class="toggleButton" data-target="buttonThreeInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonThreeInfo">
    Here's some information about the third item
  </div>


</body>

<script type="text/javascript">
  $(function() {
    $('.toggleTarget').hide();
    $(".toggleButton")
      .text("Click to display more information")
      .click(function() {
        var toggleTargetId = $(this).attr('data-target');
        var toggleTarget = $(document.getElementById(toggleTargetId));

        if ($(this).text() === 'Click to display more information') {
          $(this).text('Click to display less information');
          toggleTarget.show();
        } else {
          $(this).text('Click to display more information');
          toggleTarget.hide();
        }
      });
  });
</script>

</html>

1. Есть еще так много всего, что можно изменить… Например, прикрепить обработчик щелчка внутри оператора if?

2. Кажется, что при нажатии он отображается правильно, но при повторном нажатии он не изменяет отображаемый CSS

3. @Jesse: Это связано с тем, как вы подключили код к вашему обработчику кликов. Я добавил еще кое-что к своему ответу на это.

4. @AndrewShepherd Мне нравится ваш простой и простой метод, однако как мне найти .hire-equipment-more-information и изменить его display на inline-block и обратно с помощью соответствующих кнопок?

5. @Jesse — Вы можете сделать это, связав каждую кнопку с div через пользовательский атрибут. Я изменил свой пример.

Ответ №3:

Обрезал жир с jQuery OP. Здесь в общих чертах изложена следующая процедура:

Основной используемый метод toggleClass()
Для указания состояния .info-btn
Большим преимуществом использования классов является то, что вы можете добавить больше стилей к каждому классу, которые улучшат .info-btn состояние. например. color , background-color

Более подробная информация приведена в источнике фрагмента ниже:

ФРАГМЕНТ

 /* jQuery */

// Alternate styntax for $(document).ready(
$(function() {

  // Click on ANYTHING with the class .info-btn
  $(".info-btn").on("click", function(e) {

    // Prevent .info-btn from jumping when clicked
    e.preventDefault();

    /* `this` or .info-btn will toggle between the 
    | classes of .more and .less
    | See CSS for details of expected behavior of
    | .info-btn in both states
    */
    $(this).toggleClass('more less');
  });
});

 .info-btn {
  cursor: pointer;
}
/* Both classes use the :after pseudo-selector
| The value of content will complete the 
| string: "Click to display"...
*/

a.more:after {
  content: ' more information';
}
a.less:after {
  content: ' less information';
}
button.less:before {
  content: 'less ';
}
button.less:after {
  content: ' more';
}
button.more:before {
  content: 'more ';
}
button.more:after {
  content: ' less';
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
<div id="info-5" class="rental-info">
  <table class="rental-info-table" cellpadding="15px">
    <tr>
      <th>Length:</th>
      <th>Material:</th>
      <th>HP:</th>
    </tr>
    <tr>
      <td>7.5m</td>
      <td>Aluminium</td>
      <td>225</td>
    </tr>
  </table>
</div>
<br />
<a class="info-btn rental-link more">Click to display</a>
<br/>
<button class='info-btn less'>is</button>
<br/>