Using jquery to target and manipulate elements with the div selector

Question

Using jquery to target and manipulate elements with the div selector

I need assistance with adding a selector on my webpage where users can choose one option and retrieve the id of the selected part. This id will then be used in a link. I am new to using jQuery, so I am having trouble implementing this feature. Below is an example of the code structure:

Selector 1


<div class="col-xs-4 col-md-2">

<div id="" class="cuadro center su-signo">
<img src="" class="img-responsive" alt="">
    <div class="titulo">
<h3 class="red"><small></small></h3>
  </div>
 </div>

</div>

...

Selector 2


<div class="col-xs-4 col-md-2">

<div id="" class="cuadro center tu-signo">
<img src="" class="img-responsive" alt="">
    <div class="titulo">
<h3 class="red"><small></small></h3>
  </div>
 </div>

</div>

...

Jquery implementation so far:


<script>
var me = "";
var th = "";
   $(".tu-signo").on('click',function()  {
     me = $(this).attr("id");
        $(this).css('-webkit-filter','brightness(50%)');
    });
</script>

If you have any suggestions or solutions, please let me know. Thank you!

jquery css selector

Answer 1

Answer №1

When it comes to website development, a common issue arises with adding an active class to navigation elements or selecting tabs.

The solution is to iterate through all possible items that could have the desired CSS class and remove it before adding it to the current element.

In the example below, we first remove the .active class from all navigation items and then add it to the clicked element:

$links = $( '.nav a' );

$links.on( 'click', function (e ) {

  $links.removeClass( 'active' );
  $( this ).addClass( 'active' );

});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <a class="active" href="#">Home</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</nav>

Instead of using the .css() method to add inline styles, I recommend utilizing a CSS class for easier management of adding/removing/toggling styles.

Here's another example that aligns more closely with your requirements:

$links = $( '.nav a' );
$id = $( '.id' );

$links.on( 'click', function (e ) {

  var $this = $( this );

  $links.removeClass( 'active' );      
  $this.addClass( 'active' );
  $id.val( $this.attr( 'id' ) );  

});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <a id="home" class="active" href="#">Home</a>
  <a id="contact" href="#">Contact</a>
  <a id="about" href="#">About</a>
</nav>
<input class="id" type="text" name="id">

Answer 2

When it comes to website development, a common issue arises with adding an active class to navigation elements or selecting tabs.

The solution is to iterate through all possible items that could have the desired CSS class and remove it before adding it to the current element.

In the example below, we first remove the .active class from all navigation items and then add it to the clicked element:

$links = $( '.nav a' );

$links.on( 'click', function (e ) {

  $links.removeClass( 'active' );
  $( this ).addClass( 'active' );

});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <a class="active" href="#">Home</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</nav>

Instead of using the .css() method to add inline styles, I recommend utilizing a CSS class for easier management of adding/removing/toggling styles.

Here's another example that aligns more closely with your requirements:

$links = $( '.nav a' );
$id = $( '.id' );

$links.on( 'click', function (e ) {

  var $this = $( this );

  $links.removeClass( 'active' );      
  $this.addClass( 'active' );
  $id.val( $this.attr( 'id' ) );  

});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <a id="home" class="active" href="#">Home</a>
  <a id="contact" href="#">Contact</a>
  <a id="about" href="#">About</a>
</nav>
<input class="id" type="text" name="id">

Answer 3

Answer №2

If you want to restore the original brightness of your other selector, this solution should do the trick.

<script>
var selected = "";
   $(".tu-signo").on('click',function()  {
     selected = $(this).attr("id");
        $(".tu-signo").css('-webkit-filter','YOUR ORIGINAL BRIGHTNESS HERE');
        $(this).css('-webkit-filter','brightness(50%)');
    });


</script>

This code will bring all .tu-signo elements back to their original brightness before adjusting the one that was clicked on. I removed the var th; as it seemed unnecessary in this context.

Answer 4

If you want to restore the original brightness of your other selector, this solution should do the trick.

<script>
var selected = "";
   $(".tu-signo").on('click',function()  {
     selected = $(this).attr("id");
        $(".tu-signo").css('-webkit-filter','YOUR ORIGINAL BRIGHTNESS HERE');
        $(this).css('-webkit-filter','brightness(50%)');
    });


</script>

This code will bring all .tu-signo elements back to their original brightness before adjusting the one that was clicked on. I removed the var th; as it seemed unnecessary in this context.

Answer 5

Answer №3

When using jQuery to hide an existing choice after changing it, you must incorporate a removal function, which may not be immediately obvious.

(Assuming that I correctly understand your desired outcome.)

For example:

var me = "";
     var th = "";
      $(".tu-signo").on('click',function()  {
          if ($(this).attr("id") == "option1") {
               $('#option1').css('-webkit-filter','brightness(50%)');
               $('#option2').hide();
          }
          if ($(this).attr("id") == "option2") {
               $("#option2").css('-webkit-filter','brightness(50%)');
               $("#option1").hide();
           }
      });

Answer 6

When using jQuery to hide an existing choice after changing it, you must incorporate a removal function, which may not be immediately obvious.

(Assuming that I correctly understand your desired outcome.)

For example:

var me = "";
     var th = "";
      $(".tu-signo").on('click',function()  {
          if ($(this).attr("id") == "option1") {
               $('#option1').css('-webkit-filter','brightness(50%)');
               $('#option2').hide();
          }
          if ($(this).attr("id") == "option2") {
               $("#option2").css('-webkit-filter','brightness(50%)');
               $("#option1").hide();
           }
      });

Using jquery to target and manipulate elements with the div selector

Answer №1

Answer №2

Answer №3

Similar questions

The 'Required' attribute in HTML is malfunctioning

Highcharts' labels on the x-axis do not automatically rotate

What is the best way to change the maxWidthLg of Material UI's .MuiContainer?

When the JavaFX ComboBox drop-down opens in an upwards direction, the border appears incorrectly

RAZOR - Strip image elements from variable with HTML content

Is there a way to trigger a JavaScript function once AJAX finishes loading content?

Is the mobile site displaying CSS pixels in the physical pixel resolution?

"Troubleshooting: How to Fix Issues with document.getElementById on Dynamic Div

Create a CSS animation that causes a div element to smoothly float out of the document

Filtering with AngularJS based on integer comparison will assist in stream

Aligning a div vertically in the center of its parent container

Adjust the height of an element using CSS based on the height of another

Guide on making a prev/next | first/last button functional in list.js pagination

Showcase a picture within a row of a table using Ajax in an MVC framework

Having difficulty adjusting certain internal styles within Material UI's <Dialog> component

Troubleshooting Variable Issues in PHP and JavaScript

Store Form Input as JSON Data File

Krajee Bootstrap File Input, receiving AJAX success notification

What are some ways to monitor the movement of elements and activate functions at precise locations?

How come my jQuery isn't updating the class of a specific element?