logo
Tags down

shadow

JS: Clicking on a object from array


By : Robb Stark
Date : October 15 2020, 08:10 PM
hope this fix your issue Change your hyperlink HTML as below:
"Order"+
code :
function logMeal(id) {
    console.log(meals.find(item => item.id === id));
}


Share : facebook icon twitter icon

Get the location of a class element in the class array from hovering or clicking the object


By : thangs2.net
Date : March 29 2020, 07:55 AM
will be helpful for those in need I am currently making a project where I have different characters and as you hover over each of them information is displayed about them. While I may be able to get passed this problem with IDs, I was wondering if there was any way to obtain the location of an object in a class using given information (like using indexOf). , You can do something like this:
code :
$(() => {
  const people = $('.people div').toArray();
  const peopleInfo = $('.peopleInfo div').toArray();

  $('.people').on('mouseenter', 'div', ({target}) => {
    const info = peopleInfo[people.indexOf(target)];
    
    console.log(target.textContent, info.textContent);
  });
});
.peopleInfo {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="people">
  <div>Steve</div>
  <div>James</div>
  <div>Mike</div>
</div>
<br/>
<div class="peopleInfo">
  <div>Likes pizza</div>
  <div>Is a very good chef</div>
  <div>Has a family to look after</div>
</div>

Angular 2: Push into array upon clicking an object


By : Sujan Shah
Date : March 29 2020, 07:55 AM
To fix the issue you can do When I click a row of object, I want it to be pushed into the selectedProducts array. , I suggest to try this :
code :
<div class="list-content fluid">
    <div class="products-cards" *ngFor="let product of dataSource['docs']"  (click)="select(product)">
        <app-product-card [product]="product"></app-product-card>
    </div>
</div>

How to change 2D sprite object by clicking? and it will change back when clicking another object, like focus effect in w


By : user2086470
Date : March 29 2020, 07:55 AM
wish helps you I wish to find out how to change a object (sprite) by clicking (then it will change to another sprite object). , How to Change Sprite
code :
private void changeSprite(Sprite newSprite){
  this.GetComponent<SpriteRenderer>().sprite = newSprite;  
}
//if the object is an image you should use this instead
private void changeSprite(Sprite newSprite){
  this.GetComponent<Image>().overrideSprite = newSprite;  
}
private void OnMouseDown()
{
  changeSprite();
}
//If it's a UI Element
public Button btn;
private void Start()
{
  btn.onClick.AddListener(changeSprite);  
}
//Your Object Class
public Sprite initialSprite;
public Sprite changeSprite;
public bool isChanged = false;
public GameObject  otherObject;

private void OnMouseDown()
{
  changeSprite(changeSprite);
  isChanged = !isChanged;
  if(otherObject.isChanged)
  {
    otherObject.changeSprite(initialSprite); 
    otherObject.isChanged = !otherObject.isChanged; 
  }
}

JS: Clicking on a object from array --> show more info


By : Pinkesh Kadakia
Date : March 29 2020, 07:55 AM
seems to work fine You can find the index of the clicked article and get the item from the array with that index.
You can try the following way:
code :
"use strict";

document.addEventListener('DOMContentLoaded', loadMeals);

const meals = [
    {
        id: 1,
        title: 'Strawberry Salad with Poppy Seed Dressing',
        img: 'Strawberry-Salad-with-Poppy-Seed-Dressing.jpg',
        book: 1,
        calories: 298,
        servings: 3,
        type: 'lunch',
        price: 15,
        cook: 'Jenny Jefferson',
        quantity: 10,
    },
    {
        id: 2,
        title: 'Cashew Turkey Salad Sandwiches',
        img: 'turkey-sandwich.jpg',
        book: 2,
        calories: 198,
        servings: 2,
        type: 'lunch',
        price: 9,
        cook: 'Jenny Jefferson',
        quantity: 10
    }
];


function loadMeals() {
    let i = 0;
    let id = 1;
    let fillMealList = document.querySelector("#fillMealList");
    for (let i = 0; i < meals.length; i++) {
        let item = meals.find(item => item.id === id);
        fillMealList.innerHTML +=
            "<article class='objectP'>"+
            "<h3>" + item.title + "</h3>"+
            "<figure>"+
            "<img src='images/" + item.img + "'" +">" +
            "<figcaption>"+
            "Meal by: " +"<span>" + item.cook + "</span>" +
            "</figcaption>" +
            "</figure>"+
            "<div class='info'>"+
            "<p>€ <span>" + item.price + "</span>" + "/pp" + "</p>" +
            "<a href='#' class='addToCart'>Order</a>"+
            "</div>"+
            "</article>";
        id++;
    }
}

document.addEventListener('DOMContentLoaded', function(){
  document.querySelectorAll('.objectP').forEach(function(el){
    el.addEventListener('click', function(){
      var nodes = Array.prototype.slice.call( document.getElementById('fillMealList').children );
      var idx = nodes.indexOf(this);
      console.clear(); // clears the console
      console.log(meals[idx])
    });
  })
});
<div id="mealList">
  <div class="flexcontainer" id="fillMealList"></div>
</div>

How to render a specific object within an array, when clicking on a component, in React?


By : Sanzid Arham
Date : March 29 2020, 07:55 AM
will help you I made your intention working here: https://codesandbox.io/s/l2lqm76z0q
As Chris pointed out, the way to go is using react state. Therefore, I introduced a state with the default selected item 4 and created a handleClick function that should fire once you click on one item in your sidebar. Both of them got created in App.js:
code :
  state = {
    selected: 4
  };

  handleClick = id => {
    this.setState({ selected: id });
  };

<Sidebar onClick={this.handleClick} />
<Content selected={this.state.selected} />
<CardOverview
  image={cloudImage}
  name="Cloud Strife"
  onClick={() => this.props.onClick(1)}
/>
<section className="card-overview" onClick={this.props.onClick}>
...
</section>
// Grab the 'characters' object from App.js, and assign it to 'this.props'
const { characters, selected } = this.props;

// Filter the chracters and return only whose 'id' belongs to that of the selected one
const filteredCharacters = characters
  .filter(character => character.id === selected)
  .map(character => (
     <div className="characters" key={character.id}>
       <p>Name: {character.Name}</p>
       <p>Job: {character.Job}</p>
       <p>Age: {character.Age}</p>
       <p>Weapon: {character.Weapon}</p>
       <p>Height: {character.Height}</p>
       <p>Birthdate: {character.Birthdate}</p>
       <p>Birthplace: {character.Birthplace}</p>
       <p>Bloodtype: {character.Bloodtype}</p>
       <p>Description: {character.Description}</p>
      </div>
));
...
Related Posts Related Posts :
  • How to get prefix name from html tag
  • javascript - Simulate a click event (tap with finger) on a button in iOS
  • How to get the value of checkboxes in a kendo grid
  • Uncaught TypeError: Object(...) is not a function at eval (global-styles.js)
  • Generate divs on scroll bottom
  • App deployed to Cloud Foundry fails to start
  • Show label and percentage in Google pie chart
  • Warn user before leaving web page if changes haven't been saved
  • Objects are not valid as a React child getting error when adding div?
  • why is callback not working in nodejs with mysql?
  • D3 v4 date ticks never display last item
  • How to assign a variable which function takes as a parameter
  • Javascript how hidden div onclick of phrase
  • Can I set state inside a useEffect hook
  • How can I draw a line to the highest datapoint in chart js?
  • Make <a> link activate expand text button
  • Django: fastest way to update the data that was once sent from template to view
  • JavaScript Scope of Vaadin's "AbstractJavaScriptComponent"
  • Firestore cloud functions summing subcollections values
  • d3.js in vue component - How to hook mouse events to elements?
  • Can't add href and class to list item through javascript
  • Jest - checking local storage is called in an async function that is being mocked
  • How do I print only the selection from my list group item?
  • Using take(1) with an Observable<boolean>?
  • Multi Step Form Javascript
  • Javascript checking if username already exists(duplicate)
  • Download text file from an external URL
  • get jquery post data in node.js
  • How to cache random results using Ember data?
  • Credentials for Microsoft.Maps.TileSource callback
  • Expand particles.js to background
  • how to receive updated props in react js?
  • How do I run my code when device is connected by usb?
  • How to make javascript function can use after dot
  • Progress bar with Tooltip message should be displayed always
  • Javascript interactive card being glitchy
  • Blank data for certain hours - hence missing in my array. Is there a way to fill in the missing hours?
  • Width changing when switching from static positioning, to fixed positioning
  • Javascript form validation(oninput)
  • Stock getJSON data in a global var but later says its undefined
  • RxJS throwError event not directed to handler?
  • Non-greedy capturing parenthesis
  • Refer to class inside of static method without using its name
  • Filter array property of object without mutating the object itself
  • How to create a local module in TypeScript
  • Django - Get "total" between two elements in HTML in real-time using a script
  • How can I filter and exclude 1 item type in React?
  • Output for javascript program is 'undefined' when trying to run in command line
  • Javascript onclick if iframe exists, remove it and create new iframe?
  • Merge objects with with missing key
  • Cannot find module 'jsonwebtoken' Node.js
  • Creating a cumulative objects using javascript
  • How to write regexp to get a paramater from URL
  • Instead of getting pushed to array I get error
  • DOM Dynamic Table calculation
  • How to execute JavaScript from file
  • jQuery last child val() undefined
  • React filter and then swap array elements
  • How do I return a not found in filter function in jQuery?
  • inner json array cannot be accessed in javascript, but can console log the complete json
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org