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

Form that adjusts input fields according to the selected input value

Utilize AngularJs and JavaScript to upload information to a JSON file

Is it possible to utilize a contenteditable div in place of a textarea?

Achieving the display of font-weight 100 for Google web fonts successful

Determine the height of an image using JavaScript

When I attempt to press the shift + tab keys together, Shiftkey is activated

Animate the border to move to the next list item after it is hovered over

Having trouble with CSS :before pseudo-element and sibling selector?

Modify the chosen dates in the date range picker tool designed for Twitter Bootstrap

Utilizing jQuery arrays to retrieve JSON object properties

Locate an original identifier using Selenium WebDriver

To make a JavaFX label stand out, simply prepend a vibrant red asterisk at the start of

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

Preserve scripts when loading content into a pjax container

Draggable HighStock element causing issues with Gridster dragging

Using Node JS to serve an HTML file along with cascading style sheets

How can you determine if a user has selected "Leave" from a JavaScript onbeforeunload dialog box?

The issue with the left border color not functioning in JavaScript

The issue of app.css and app.js resources not loading in Laravel 8 with nginx, resulting in a 404 not found error, needs to be

Contact on the go with our handy mobile contact form