jQuery не обновляет фоновое изображение элемента ?

ProgramBox

jQuery не обновляет фоновое изображение элемента ?

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

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

При наведении курсора мыши на изображение на этой странице я должен обновлять атрибут src большего элемента div выше, чтобы он был URL-адресом изображения, над которым я в данный момент нависаю.

Мои точки останова достигают

«$(‘#image’).on(‘hover’, function() {«

строка, но фактически не устанавливает атрибут url элемента div в следующей строке. Какие-либо указатели?

 function upDate(previewPic) {
  let newUrl = previewPic.src;
  $('#image').on('hover', function() {
    $('#image').attr("url", newUrl);
  });
};

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="image">
  Hover over an image below to display here.
</div>

<img alt="Batter is ready" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg">

<img alt="Perfect Baking" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg">

<img alt="Yummy yummy cup cake" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg">

1. img имеет src атрибут, а не url . Изменения в вашем JavaScript

2. вы можете напрямую не устанавливать изображение в div, либо использовать тег img, либо использовать другое свойство div css, например, фон изображения.

3. В обновлении функции вы просто устанавливаете EventListener для другого элемента. Это то, что вы хотите сделать? Разве вы не хотите создать добавить / вставить это в div «#image»? И, как указал @Anton, в элементе div нет атрибута url. Ofc вы можете определить его, если вы действительно этого хотите, но вы должны использовать элемент «img» с атрибутом «src».

4. Также вы используете встроенный обработчик событий ( onmouseover ), чтобы затем назначить другой обработчик событий ( .on('hover') , на этот раз для image элемента, что, вероятно, не является вашим намерением. Кроме того, в коде, который вы предоставили, есть ошибка, которая unDo не определена.

5. @DincaAdrian это было задание, и мне сказали не редактировать какой-либо html / css, только строго .js с использованием jquery

Ответ №1:

Удалите все встроенные обработчики событий
Добавьте mouseenter и оставьте обработчики
Доступ к свойству css

У Divs нет URL-адресов

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

 $(".preview").on("mouseenter",function() {
  $("#image").css({"background-image": `url(${this.src})`}); // this.src is the DOM notation for the source of the image you are hovering
})  
$(".preview").on("mouseleave",function() {
  $("#image").css({"background-image": "" })
})

 #image { 

height: 500px }

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


<img alt="Batter is ready" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg" height="50">

<img alt="Perfect Baking" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg" height="50">

<img alt="Yummy yummy cup cake" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg" height="50">

<div id="image">
  Hover over an image above to display here.<br/>
</div>

1. «this.src» просто ссылается на div, верно? не фактическое изображение, которое я навожу под ним?

2. this.src является источником фактического изображения, на которое вы наводите курсор. Это происходит из $(«.preview») — синтаксис jQuery $(this).prop("src")

3. Ах, я предположил, что «это» пришло из элемента #image

4. $( ".preview" ).hover( function(){$("#image").css({"background-image": url(${this.src}) });}); — Извините, моя уценка уродлива, но это то, что сработало для меня. Спасибо! С самого начала у меня были перепутаны элементы «image» и «img», что было большой причиной.

Ответ №2:

Вы пытаетесь установить URL-адрес (недопустимый атрибут) для div. Что вы на самом деле хотите сделать, так это установить фоновый URL-адрес div. Проверьте мой фрагмент для подсказки в правильном направлении.

Также не добавляйте другой прослушиватель событий внутри функции обновления.

 function upDate(previewPic) {
  let newUrl = previewPic.src;
  document.getElementById("image").style.backgroundImage = 'url('   newUrl   ')';
}

function unDo(abc) {
  document.getElementById("image").style.backgroundImage = 'url()';
}

 #image {
  width: 100px;
  height: 120px;
  background-size: 100px 120px;
}

 <div id="image">
  Hover over an image below to display here.
</div>

<img alt="Batter is ready" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg">

<img alt="Perfect Baking" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg">

<img alt="Yummy yummy cup cake" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg">