Как исправить ошибку в коде jQuery подкачки изображений?

#jquery

Вопрос:

Я пытаюсь создать код для обмена изображениями в таблице на основе значений из базы данных. После некоторых исследований на этом сайте у меня есть этот код, измененный для моих нужд. На данный момент не динамичен, так как входные данные на этом этапе жестко закодированы. jQuery не работает, потому что я что-то упустил из виду. Очень новичок в jQuery, поэтому был бы признателен за любую помощь, которая укажет мне правильное направление.

 <table>
  <tr>
    <td>6</td>
    <td id="td1">
      <img />
      </td>
    </tr>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
      $('#td1 img').attr('src' function(){
          
return parseInt($(this).parent().prev().html()) > 5 ? 'src1','/images/clubsTiny.png' : 'src2','/images/blkCross.png';
});
  </script>

1. Две проблемы в вашем синтаксисе. Во-первых, вам нужно вставить , между аргументами attr() . Во-вторых, вам нужно удалить 'src1', и 'src2', из троичного в функции. Тогда ваш код будет работать. Голосование за закрытие, так как проблемы возникли из-за опечаток. Для дальнейшего использования, если код JS работает не так, как ожидалось, откройте devtools и проверьте консоль на наличие ошибок. Они расскажут вам о проблеме и о том, на какой линии она находится.

2. Некоторая базовая отладка решила бы вашу собственную проблему

3. Спасибо Рори за решение и совет.

Ответ №1:

Сначала разделитесь $('#td1 img').attr('src', function () , . Обратите внимание, что attr требуется два параметра, и каждый параметр разделяется , .

А затем изменил состояние с:

 return parseInt($(this).parent().prev().html()) > 5 ? 'images/clubsTiny.png' : 'images/blkCross.png';

Обратите внимание, что троичные условия являются expression ? 'do true one' : 'do false one'

  $('#td1 img').attr('src', function () {
            return parseInt($(this).parent().prev().html()) > 5 ? 'src1/images/clubsTiny.png' : 'src2/images/blkCross.png';
        });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  
<table>
  <tr>
    <td>6</td>
    <td id="td1">
      <img />
      </td>
    </tr>
</table>

Обновить

Для замены содержимого на img вы можете использовать $('#td1').html(img)

 function replace() {
    let td = $('#td1');

    let img = $("<img />");

    img.attr("src", ()=>  td.html() > 5 ? 'images/clubsTiny.png' : 'images/blkCross.png')

    $('#td1').html(img)
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table>
    <tr>
        <td id="td1">
            6
        </td>
    </tr>
</table>

<button onclick="replace()">click to replace</button>

1. Ну, почти, поправка от Рори очень помогла, но я пытался заменить номер изображением, а не поместить его рядом с ним.

2. номер @codestruggler находится в другом td , а изображение-в другом. Что ты имеешь в виду? каков ваш ожидаемый результат?

3. спасибо, похоже, мне нужно изучить это еще немного. Я хочу заменить число в td изображением, а не иметь и то, и другое. У меня есть данные, поступающие из базы данных в таблицу, и если значение больше 6, покажите одно изображение и меньше 6, покажите другое.

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

5. Спасибо! Алиреза, это мне очень помогает, и я ценю твою помощь. Мне нужно изучить это, чтобы понять, как это работает, и адаптировать его. Мне никогда не нужно видеть номер и не нужна кнопка, чтобы его изменить. Я просто хочу, чтобы изображение отображалось в таблице на основе значения, полученного из базы данных. Номер в td изменится, поступив из базы данных. Еще раз спасибо за вашу помощь.