Что я делаю не так с этим JQUERY и CSS?

avatar
Devin
9 августа 2021 в 06:10
181
2
0

Я хочу иметь возможность переключать "декорирование текста" на "зачеркивание" при нажатии. (Кроме того, если кто-нибудь может указать мне правильное направление, как заставить его перейти в конец списка после нажатия, это было бы полезно.) 

$(".player-name-wrapper").children().click(function() {
  if ($(this).css.style.text - decoration == "line-through") {
    $(this).css("text-decoration", "none");
  } else {
    $(this).css("text-decoration", "line-through");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="qb-wrapper" class="position-wrapper hide-wrapper">
  <h4 class="box-heading">QB</h4>
  <div id="qb-names" class="player-name-wrapper">
    <a>QB Player Name</a>
    <a>Player Name</a>
    <a>Player Name</a>
    <a>Player Name</a>
    <a>Player Name</a>
    <a>Player Name</a>

  </div>
</div>
Источник
Phil
9 августа 2021 в 06:23
0

Свойство стиля в JS — textDecoration, то есть if ($(this).css.style.textDecoration == "line-through").

Adem yalçın
9 августа 2021 в 06:28
0

$(".player-name-wrapper > *").on('click', function(){ $(this).css('text-decoration', 'line-through'); $(this).siblings ().css('украшение текста', 'нет'); })

Andy
9 августа 2021 в 06:33
1

@Phil: $(this).css.style... не сработает.

Phil
9 августа 2021 в 06:35
1

@Энди хорошая мысль. Слишком много копирования/вставки для меня

Ответы (2)

avatar
vanowm
9 августа 2021 в 07:15
-1

Просто используйте this.style.textDecoration.

Для такой простой задачи вам не нужны вредоносные программы jquery:

const container = document.querySelector(".player-name-wrapper");
container.addEventListener("click", e =>
{
    const a = e.target;
    if (a === container)
    return;

    a.classList.toggle("crossed");

    if (a.classList.contains("crossed"))
    container.appendChild(a); //move to the bottom of the list
  else
    container.insertBefore(a, container.querySelector(".crossed")); //move to the top of crossed list
})
.player-name-wrapper
{
  display: grid;
}

.player-name-wrapper > .crossed
{
  text-decoration: line-through;
}
<div id="qb-wrapper" class="position-wrapper hide-wrapper">
  <h4 class="box-heading">QB</h4>
  <div id="qb-names" class="player-name-wrapper">
    <a>QB Player Name</a>
    <a>Player Name1</a>
    <a>Player Name2</a>
    <a>Player Name3</a>
    <a>Player Name4</a>
    <a>Player Name5</a>
  </div>
</div>
avatar
Amirhossein Shahbazi
9 августа 2021 в 06:23
3
  • У вас опечатка в style.text - decoration.
  • Кроме того, this уже относится к нужному элементу. Просто измените свой стиль с ним. Вы комбинируете JavaSript и jQuery, что приводит к ошибкам.

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

$(".player-name-wrapper").children().click(function () {
        if (this.style.textDecoration === 'line-through') {
            this.style.textDecoration = "none";
        } else {
            this.style.textDecoration = "line-through";
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="qb-wrapper" class="position-wrapper hide-wrapper">
    <h4 class="box-heading">QB</h4>
    <div id="qb-names" class="player-name-wrapper">
        <a>QB Player Name</a>
        <a>Player Name</a>
        <a>Player Name</a>
        <a>Player Name</a>
        <a>Player Name</a>
        <a>Player Name</a>
    </div>
</div>
Andy
9 августа 2021 в 06:38
1

${this).get(0).style.textDecoration также будет работать.

vanowm
9 августа 2021 в 06:42
0

@ Энди, ты прав, но не поощряй людей без необходимости использовать вирусы для таких простых вещей.

Andy
9 августа 2021 в 06:45
0

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

Phil
9 августа 2021 в 06:51
1

@Andy, зачем оборачивать элемент в jQuery только для того, чтобы сразу его развернуть? Возможно, вы имели в виду $(this).css("text-decoration")?

Andy
9 августа 2021 в 07:08
0

Я согласен. В этом нет логики. Я перестал использовать jQuery много лет назад. Но get существует не просто так. Еще в 2006 году jQuery был откровением. Учитывая эволюцию JS за последние 10 лет, он стал менее важным, но по-прежнему используется на большинстве веб-сайтов по всему миру, поэтому он по-прежнему актуален для многих разработчиков. @Фил. Но также и причина, по которой я проголосовал за ответ Амирхоссейна Шахбази.