Basic jQuery Element Selection

Question

Basic jQuery Element Selection

1) Is there a way to trigger an alert only when images like 1_1.jpg, 1_2.jpg, 1_3.jpg or 2_1.jpg, 2_2.jpg, 2_3.jpg are selected and none of the others? (similar to *_1.jpg, *_2.jpg, *_3.jpg)

2) How can I shuffle the order of the image positions randomly (e.g. first: 2_1.jpg, second: 1_5.jpg, third: 1_9.jpg etc., where only the end of src (_*.jpg) should differ)?

View code at jsFiddle

HTML:

<img class="image" src="../img/Album1/1_1.jpg">
<img class="image" src="../img/Album1/1_2.jpg">
<img class="image" src="../img/Album1/1_3.jpg">
<img class="image" src="../img/Album1/1_4.jpg">
<img class="image" src="../img/Album1/1_5.jpg">
<img class="image" src="../img/Album1/1_6.jpg">
<img class="image" src="../img/Album1/1_7.jpg">
<img class="image" src="../img/Album1/1_8.jpg">
<img class="image" src="../img/Album1/1_9.jpg">
<img class="image" src="../img/Album1/1_10.jpg">
<img class="image" src="../img/Album1/2_1.jpg">
<img class="image" src="../img/Album1/2_2.jpg">
<img class="image" src="../img/Album1/2_3.jpg">

CSS:

.img {
    height:30px;
    width:30px;
    background:blue;
    margin-left:10px;
}

.selected {
    -moz-box-shadow: 0 0 7px 4px blue; 
    -webkit-box-shadow: 0 0 7px 4px blue; 
    box-shadow: 0 0 7px 4px blue;
}

JQUERY:

$( ".image" ).click(function() {
  if($(this).hasClass("selected"))
      $(this).removeClass("selected");
  else
      $(this).addClass("selected");  
});

javascript jquery html css

Answer 1

Answer №1

1) Is there a way to receive an alert when I choose either 1_1.jpg, 1_2.jpg, 1_3.jpg or 2_1.jpg, 2_2.jpg, 2_3.jpg and none of the others are selected? Perhaps using a pattern like *_1.jpg, *_2.jpg, *_3.jpg?

You can gather your img elements into an array with $("img"), then create conditions based on both the src and class attributes within this array.

2) How can I randomly arrange the order of images (e.g. first: 2_1.jpg, second: 1_5.jpg, third: 1_9.jpg, etc., where only the end of the src (_.jpg) differs)?

To achieve this, collect your img elements in an array using $("img"), shuffle the array, and then use append to add the elements to a container. You can refer to this example for guidance.

Answer 2

1) Is there a way to receive an alert when I choose either 1_1.jpg, 1_2.jpg, 1_3.jpg or 2_1.jpg, 2_2.jpg, 2_3.jpg and none of the others are selected? Perhaps using a pattern like *_1.jpg, *_2.jpg, *_3.jpg?

You can gather your img elements into an array with $("img"), then create conditions based on both the src and class attributes within this array.

2) How can I randomly arrange the order of images (e.g. first: 2_1.jpg, second: 1_5.jpg, third: 1_9.jpg, etc., where only the end of the src (_.jpg) differs)?

To achieve this, collect your img elements in an array using $("img"), shuffle the array, and then use append to add the elements to a container. You can refer to this example for guidance.

Answer 3

Answer №2

1) When it comes to selecting images, the process is pretty straightforward. An alert will pop up when image 1_1 is selected, making it easy to work with the rest.

//Alert pops up when any image is selected.
$(document).ready(function() {
  var selectedImgsArr = [];
   $("img").click(function() {
       //Alerts the name of the image.
       var src = $(this).attr('src');
       if(src="../img/Album1/1_1.jpg") {
           alert("1_1 selected");
       }
   });
});

2) To randomize an array containing image names and then shuffle them for printing with JQuery, you can create a function. Check out here for more information.

Best of luck with your project!

Answer 4

1) When it comes to selecting images, the process is pretty straightforward. An alert will pop up when image 1_1 is selected, making it easy to work with the rest.

//Alert pops up when any image is selected.
$(document).ready(function() {
  var selectedImgsArr = [];
   $("img").click(function() {
       //Alerts the name of the image.
       var src = $(this).attr('src');
       if(src="../img/Album1/1_1.jpg") {
           alert("1_1 selected");
       }
   });
});

2) To randomize an array containing image names and then shuffle them for printing with JQuery, you can create a function. Check out here for more information.

Best of luck with your project!

Basic jQuery Element Selection

Answer №1

Answer №2

Similar questions

Translating from a higher-level programming language to a lower-level programming language

Is it common for content to duplicate when using the 'position: fixed' property in CSS media print?

How come the max-width property is not functioning properly on tables in Internet Explorer 7?

Defense Against Altering POST Values via Browser Developer Tools

Within the ASP.NET Framework 4, it is necessary to enable the Listbox control to trigger an event when a user double

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Each time the Jquery callback function is executed, it will return just once

AngularJS enhanced dropdown navigation bar built using Bootstrap styling

Mobile Bootstrap4 NavBar Bug Fix

css displaying drop-down menu when hovered over

What is the correct way to invoke a function expression that is nested within another function?

What strategies can be employed to troubleshoot CSS design problems that exclusively occur in the production environment?

What could be the reason for the absence of this Javascript function in my attribute?

Tips for utilizing li tags to mimic the functionality of a table

When using jQuery's `.click()` method on an element to collapse it with the 'show' parameter set to false, the disabling action will only take effect after the document

What is the correct way to invoke a function from the reducer/actions within this specific scenario?

Javascript timer that counts down using cookies for storage

Issues with setSelectionRange functionality in JavaScript unit tests leading to unexpected behavior

Bidirectional data-binding in AngularJS for submitting form data via POST requests

What causes jquery to malfunction when making an ajax call?