Jquery 悬停以更改图像在Angular4中不起作用_Jquery_Html_Angular

Jquery 悬停以更改图像在Angular4中不起作用

jquery html angular

Jquery 悬停以更改图像在Angular4中不起作用,jquery,html,angular,Jquery,Html,Angular,我在一个Angula4项目中工作，在这个项目中，我有一个鼠标悬停以更改图像部分，我做了一些类似于下面的代码，但它不适合我，但相同的代码在（visual studio）其他项目中完美地工作下一步我该做什么，或者我在这方面错过了什么 product.component.html <div class="col-5"> <div class="container" > <img src="assets/bank/cart.png" id="

我在一个Angula4项目中工作，在这个项目中，我有一个鼠标悬停以更改图像部分，我做了一些类似于下面的代码，但它不适合我，但相同的代码在（visual studio）其他项目中完美地工作

下一步我该做什么，或者我在这方面错过了什么

product.component.html

<div class="col-5">
      <div class="container" >
        <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="assets/Product_Details/Show1.png">
          <img id="sm005" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="assets/Product_Details/Show2.png">
          <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="assets/Product_Details/Show3.png">
          <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="assets/Product_Details/Show4.png">
          <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="assets/Product_Details/Show5.png">
      </div>
    </div>

<div class="col-5">
      <div class="container" >
        <img [src]="imageURL" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/350x150" alt="img1" class="img-thumbnail" ref="https://via.placeholder.com/350x150">
          <img id="sm005" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/351x151" alt="img2" class="img-thumbnail" ref="https://via.placeholder.com/351x151">
          <img id="sm002" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/352x152" alt="img3" class="img-thumbnail" ref="https://via.placeholder.com/352x152">
          <img id="sm003" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/353x153" alt="img4" class="img-thumbnail" ref="https://via.placeholder.com/353x153">
          <img id="sm004" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/354x154" alt="img5" class="img-thumbnail" ref="https://via.placeholder.com/354x154">
      </div>
    </div>

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">`</script>
    <script>
      $('img[id^=sm00]').click(function () {
          $('#ProductImage').attr('src', $(this).attr('ref'));
      });
    </script>

`
$（'img[id^=sm00]'）。单击（函数（）{
$（'#ProductImage'）.attr（'src'，$（this.attr（'ref'））；
});

您可以执行以下操作：

product.component.html

<div class="col-5">
      <div class="container" >
        <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="assets/Product_Details/Show1.png">
          <img id="sm005" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="assets/Product_Details/Show2.png">
          <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="assets/Product_Details/Show3.png">
          <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="assets/Product_Details/Show4.png">
          <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="assets/Product_Details/Show5.png">
      </div>
    </div>

<div class="col-5">
      <div class="container" >
        <img [src]="imageURL" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/350x150" alt="img1" class="img-thumbnail" ref="https://via.placeholder.com/350x150">
          <img id="sm005" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/351x151" alt="img2" class="img-thumbnail" ref="https://via.placeholder.com/351x151">
          <img id="sm002" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/352x152" alt="img3" class="img-thumbnail" ref="https://via.placeholder.com/352x152">
          <img id="sm003" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/353x153" alt="img4" class="img-thumbnail" ref="https://via.placeholder.com/353x153">
          <img id="sm004" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/354x154" alt="img5" class="img-thumbnail" ref="https://via.placeholder.com/354x154">
      </div>
    </div>

工作

使用click事件处理程序更新了代码

更新

要显示默认图像，请将.ts文件更改为：

import { Component } from '@angular/core';

@Component({
  selector: 'my-product',
  templateUrl: './product.component.html',
  styleUrls: [ './product.component.css' ]
})
export class ProductComponent  {
  name = 'Angular 4';
   imageURL:string = "https://via.placeholder.com/500x500"; // change is here

  constructor(){

  }

  mouseEnter(event){
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.ref;
    var value = idAttr.nodeValue;
    console.log(value)
    this.imageURL = value ; //I have binded thisvariable in HTML
  }

  mouseLeave(ev){
    //reset this.imageURL if needed
  }
}

您可以执行以下操作：

product.component.html

<div class="col-5">
      <div class="container" >
        <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="assets/Product_Details/Show1.png">
          <img id="sm005" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="assets/Product_Details/Show2.png">
          <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="assets/Product_Details/Show3.png">
          <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="assets/Product_Details/Show4.png">
          <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="assets/Product_Details/Show5.png">
      </div>
    </div>

<div class="col-5">
      <div class="container" >
        <img [src]="imageURL" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/350x150" alt="img1" class="img-thumbnail" ref="https://via.placeholder.com/350x150">
          <img id="sm005" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/351x151" alt="img2" class="img-thumbnail" ref="https://via.placeholder.com/351x151">
          <img id="sm002" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/352x152" alt="img3" class="img-thumbnail" ref="https://via.placeholder.com/352x152">
          <img id="sm003" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/353x153" alt="img4" class="img-thumbnail" ref="https://via.placeholder.com/353x153">
          <img id="sm004" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/354x154" alt="img5" class="img-thumbnail" ref="https://via.placeholder.com/354x154">
      </div>
    </div>

工作

使用click事件处理程序更新了代码

更新

要显示默认图像，请将.ts文件更改为：

import { Component } from '@angular/core';

@Component({
  selector: 'my-product',
  templateUrl: './product.component.html',
  styleUrls: [ './product.component.css' ]
})
export class ProductComponent  {
  name = 'Angular 4';
   imageURL:string = "https://via.placeholder.com/500x500"; // change is here

  constructor(){

  }

  mouseEnter(event){
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.ref;
    var value = idAttr.nodeValue;
    console.log(value)
    this.imageURL = value ; //I have binded thisvariable in HTML
  }

  mouseLeave(ev){
    //reset this.imageURL if needed
  }
}

为什么你要使用jquery..同样可以在angularuse

（mouseenter）=“mouseenter（）”中使用

event to your image tagI保留Angular4项目中的index.html。无需这样做。我将创建stackblitz来解决您的问题。我们不建议在angular应用程序中使用jquery“为什么要使用jquery”。angularuse

（mouseenter）=“mouseenter（）”中也可以这样做

event to your image tagI保留Angular4项目中的index.html。无需这样做。我将创建stackblitz来解决您的问题我们不建议在angular应用程序中使用jquery‘默认情况下，希望在大框中显示图像……但如果我给出[src]=“imageURL”这个我不能设置另一个图像源…你能帮我吗默认情况下想在大框中显示一个图像…但是如果我给[src]=“imageURL”这个我不能设置另一个图像源…你能帮我吗