Click a button then displayed the selected value

Question

I would like to ask, if I am having a size selector created by an unordered list, like the picture shown below. I have also written some coding but seems they are not working. Currently they are not clickable and I can just make the border as the selected one by configuring its CSS.

<script>
$(function(){
$(“#selected_1").on("click", function(){
    $("main li.s-attribute li.s-value").css("border-color:#2D4274;");})})
</script>

        <li class="s-value">
            <a href=“#” title=“size : 1” class=“size-anchor" id="selected_1">1</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 2" class="size-anchor">2</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 3" class="size-anchor">3
            </a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 4" class="size-anchor">4</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 5" class="size-anchor">5</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 6" class="size-anchor">6</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 7" class="size-anchor">7</a>
        </li>

So I wonder how can I configure them to make them clickable and at the same time when I have clicked on it the corresponding number will be shown, i.e., SIZE — (Clicked) —> SIZE : 4?? Thanks

Why are you using fancy `“`? Just use `"`. Rephrase and format the OP — Satpal, Jan 17 '17 at 05:49

ab29007 · Accepted Answer · 2017-01-17T06:02:44.583

2

In this snippet to show the text (when you click the li), I am taking it's title attribute and setting the text of h1 equal to it.

The clicked li will then have class="active" and you can alter it's css.

$(".s-value a").click(function(){
  var heading =  $(this).attr("title"); //showing the size in h1
  $("#showcase").text(heading);

  var liIt = $(this).parent();          //Adding the class active to the clicked li
  $(".s-value").removeClass("active");
  $(liIt).addClass("active");
});

.s-value{
  padding:0;
  margin:5px;
  border:1px solid Green;
  float:left;
  list-style-type:none;
}
.s-value a{
  display:block;
  padding:5px;
}
.s-value.active a{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="s-value">
  <a href="#" title="size : 1" class="size-anchor" id="selected_1">1</a>
</li>
<li class="s-value">
  <a href="#" title="size : 2" class="size-anchor" id="selected_2">2</a>
</li>
<li class="s-value">
  <a href="#" title="size : 3" class="size-anchor" id="selected_3">3</a>
</li>
<li class="s-value">
  <a href="#" title="size : 4" class="size-anchor" id="selected_4">4</a>
</li>

<h1 id="showcase"></h1>

edited Jan 17 '17 at 06:02

answered Jan 17 '17 at 05:55

ab29007

7,611
2
17
43

Great! Thank you so much for your help! It is working!!! Sorry I am a new self-learner of those jQuery stuffs so I am not really understanding them before... but your example has given me a very clear structure! Thank you!!! – Sammi Jan 18 '17 at 02:09
btw i want to ask, originally I have a hyperlink beside the h1 tag (i.e. Size Guide)... now I have successfully popped the text in the h1 tag, but the hyperlink will be disappeared after the h1 tag is displayed with size. Is that the h1 tag will cover the link so it will make it hiding? thanks – Sammi Jan 18 '17 at 02:45
sorry, I am not being able to visualize your problem. can you set up a fiddle of your current code. – ab29007 Jan 18 '17 at 03:41
Sorry, it is my fault to make a CSS mistake! It is solved now! Thanks! – Sammi Jan 19 '17 at 04:31

score 0 · Answer 2 · answered Jan 17 '17 at 05:58

You ca use jquery to add CSS. I made a little snippet with divs

$('.s-value').click(function() {
  $(this).parent().find('.s-value').css('border', '0px solid black');
  $(this).css('border', '1px solid black');
});

.s-value{
  padding: 10px;
  width: 80px;
  margin: 5px;
  display: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s-parent">
<div id="s-value" class="s-value">
  1
</div>
  <div id="s-value" class="s-value">
  2
</div>
  <div id="s-value" class="s-value">
  3
</div>
  </div>

score 0 · Answer 3 · answered Jan 17 '17 at 05:59

$(document).ready(function(){
  $(".s-value").each(function(){
    $(this).on('click',function(){
      // value which is selected
      console.log($(this).find('.size-anchor').text());
      
    });
  })
})

ul{
  width:100%;
  list-style-type:none;
  padding:0;
}
ul li{
  width:25%;
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>  
<ul>  
<li class="s-value">
    <a class="size-anchor">1</a>
</li>
<li class="s-value">
    <a class="size-anchor">2</a>
</li>
<li class="s-value">
    <a class="size-anchor">3</a>
</li>
<li class="s-value">
    <a class="size-anchor">4</a>
</li>
<li class="s-value">
    <a class="size-anchor">5</a>
</li>
<li class="s-value">
    <a class="size-anchor">6</a>
</li>
<li class="s-value">
    <a class="size-anchor">7</a>
</li>
<li class="s-value">
    <a class="size-anchor">8</a>
</li>
</ul>  
</body>
</html>

score 0 · Answer 4 · answered Jan 17 '17 at 06:05

Just try it with class attribute.Have'nt corrected the css part though Hopefully this will work:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
    <script>



$(function(){
        $(".selectsize").on("click", function(e){
            alert($(this).attr('title'));
            $("main li.s-attribute li.s-value").css("border-color:#2D4274;");
        });
    });
</script>

            <li class="s-value">
                <a href="#" title="size : 1" class="size-anchor selectsize">1</a>
            </li>

            <li class="s-value">
                <a href="#" title="size : 2" class="size-anchor selectsize" >2</a>
            </li>

            <li class="s-value">
                <a href="#" title="size : 3" class="size-anchor selectsize">3
                </a>
            </li>

score 0 · Answer 5 · answered Jan 17 '17 at 06:07

add onclick() function on anchor tag or li tag.Pass id to function then you can display size depending upon id.

function func(id){
if(id=="selected_1"){
alert("SIZE — (Clicked) —> SIZE : 4");
}
}

or if you don't want to use if condition

function func(id){
        var msg= $("selected_1").title();
alert(msg);
        }

score 0 · Answer 6 · answered Jan 17 '17 at 06:19

Since you are using JQuery the following code should be working for a clickable list:

<span class="anchor-list-title">SIZE</span>
  <ul>
    <li class="s-value">
      <a href="#" title="size : 1" class="size-anchor" id="selected_1">1</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 2" class="size-anchor">2</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 3" class="size-anchor">3</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 4" class="size-anchor">4</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 5" class="size-anchor">5</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 6" class="size-anchor">6</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 7" class="size-anchor">7</a>
    </li>
  </ul>

  <script>
    $(function () {
      var $anchorListTitle = $('.anchor-list-title');

      // Set the css to #selected_1
      var $selectedAnchor = $('#selected_1');
      $selectedAnchor.css('border', '1px solid red'); // http://api.jquery.com/css/

      // Get all anchors and add the click event
      var $anchors = $('.size-anchor');
      $anchors.click(function (element) { // https://api.jquery.com/click/
        $clickedElement = $(element.target);

        // Change title
        $anchorListTitle.text('SIZE -- (Clicked) --> ' + $clickedElement.text()); // https://api.jquery.com/text/

        // Remove border for all anchors and add to the clicked element
        $anchors.css('border', 'none');
        $clickedElement.css('border', '1px solid red');
      });
    });
  </script>

I added the link to some useful jQuery documentation pages in the comments. Please note that you can also use classes instead of css using the addClass and removeClass functions from jQuery which would avoid hard coding css in the html and remove the need to use $selectedAnchor.css('border', '1px solid #2D4274');.

Please also note that adding a click event can also work on other elements that <a>.

I hope this will be useful for you.

Thank you for your information! I am new self-learner of jQuery so I am really confusing about the stuffs... but now it is working! Thanks — Sammi, Jan 18 '17 at 02:11

score 0 · Answer 7 · edited May 23 '17 at 12:17

Try this. Add a click event and add a class to the target element, get the title attribute of the selected tab. A sample code is added here. I have used a fancy font for representation here. Also I have user inner border rather than outer border. Inner border will results in breaking down the content into two lines.

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
    <style>
        .selected {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            border: 3px solid #6b6b6b;
        }
        
        .s-value {
            width: 100px;
            float: left;
            margin: 5px;
            height: 70px;
            display: table;
        }
        
        .s-value a {
            font: 200 40px/1.2 'Merienda One', Helvetica, sans-serif;
            color: rgba(0, 0, 0, 0.7);
            text-shadow: 3px 3px 3px #fff;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            text-decoration: none;
            background: #e2e2e2;
        }
        
        #SelectedSize {
            font: 200 40px/1.2 'Merienda One', Helvetica, sans-serif;
            text-transform: uppercase;
            font-size: 25px;
            height: 50px;
        }
    </style>
</head>

<body>
    <script>
        $(function () {
            $(".size-anchor").on("click", function (evt) {
                var selectedSize = $(this).attr("title"); 
                $("#SelectedSize").text(selectedSize);
                var liIt = $(this).parent();
                $(".s-value").removeClass("selected");
                $(liIt).addClass("selected");
            })
        })
    </script>
    <div id="SelectedSize"> </div>

    <li class="s-value">
        <a href="#" title="size : 1" class="size-anchor" id="selected_1">1</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 2" class="size-anchor">2</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 3" class="size-anchor">3
            </a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 4" class="size-anchor">4</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 5" class="size-anchor">5</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 6" class="size-anchor">6</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 7" class="size-anchor">7</a>
    </li>
</body>

</html>

Click a button then displayed the selected value

7 Answers7