CODEWITHSUNDEEP
jquery
moksha
moksha

Reputation: 47

adding icon for visited images in jquery

<html>
    <head>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <style>
    button{
        float:right;
        margin-top: -2%;
        margin-right: 5%;
    }
    #contentBox{
        width:50%;
        height:100%;
        border:2px solid black;
        margin-top: 10%;
        padding:10px;
    }
    #icon{
    font-size:3em;
    padding-left: 15px;
    color:#008000;
    }
   #cross{
   font-size:3em;
   padding-left: 15px;
   color:red;
   }
   div #icon{
   display: none;
   }
   div #cross{
   display: none;
   }
   </style>

    <script>
    $(document).ready(function(){
         $("#firstImg").click(function(){
         $('#contentBox').html('');  
         $('<p>Shankar Dayal Sharma was the ninth President of India</p>').appendTo('#contentBox');
         $('#contentBox').show();
        });
        $("#secondImg").click(function(){
        $('#contentBox').html('');
        $('<p>Kocheril Raman Narayanan was the tenth President of India.<p>').appendTo('#contentBox');
        $('#contentBox').show();
        });
        $("#thirdImg").click(function(){
        $('#contentBox').html('');
        $('<p>.Avul Pakir Jainulabdeen "A. P. J." Abdul Kalam  was the 11th President of India from 2002 to 2007.</p>').appendTo('#contentBox');
        $('#contentBox').show();
        });
        $("#fourthImg").click(function(){
        $('#contentBox').html('');
        $('<p>Pratibha Devisingh Patil is an Indian politician who served as the 12th President of India from 2007 to 2012.</p>').appendTo('#contentBox');
        $('#contentBox').show();
        });
        $("#fifthImg").click(function(){
        $('#contentBox').html('');
        $('<p>Pranab Kumar Mukherjee  is the 13th and current President of India.</p>').appendTo('#contentBox');
        $('#contentBox').show();
        });
    });
    </script>
    </head>
    <body>
        <div class="col-md-6">

                <div><img src="img/1.jpg" alt="hello" id="firstImg"><i class="fa fa-check" id="icon"></i><i class="fa fa-times" id="cross"></i></div>
                <div><img src="img/2.png" alt="hello" id="secondImg"><i class="fa fa-check" id="icon"></i><i class="fa fa-times" id="cross"></i></div>
                <div><img src="img/3.jpg" alt="hello" id="thirdImg"><i class="fa fa-check" id="icon"></i><i class="fa fa-times" id="cross"></i></div>
                <div><img src="img/4.jpg" alt="hello" id="fourthImg"><i class="fa fa-check" id="icon"></i><i class="fa fa-times" id="cross"></i></div>
                <div><img src="img/5.jpg" alt="hello" id="fifthImg"><i class="fa fa-check" id="icon"></i><i class="fa fa-times" id="cross"></i></div>

        </div>
        <div class="col-md-6" id="contentBox">
        </div>
        <div class="col-md-12">
        <button type="button" id="submit" >Submit</button>
        </div>
    </body>
    </html>

Hi Here is my code, in which i added one submit button. when i click submit,i need to show tick-mark for visited images and cross mark for invisited images.How to write code for this?please anyone help me

Upvotes: 0

Views: 80

Answers (2)

Sharmila
Sharmila

Reputation: 795

here is working sample.. Pls cahnge the values 'visited' and 'not visited' to respective images.

https://plnkr.co/edit/mn8ajK8r91COw7PrhqWE?p=preview

added some functions and css changes also

$('.imgwrap').each(function(){
  $(this).attr('visited', 'false');
  $(this).append('<span>not visited</span>');
});
$('.imgwrap').click(function(){
  $(this).attr('visited', 'true');
});

$('#submit').click(function(){
  $('.imgwrap').each(function(){
    if($(this).attr('visited') === 'true'){
     $(this).find('span').html('visited');
    }
  });

Upvotes: 0

br3t
br3t

Reputation: 1658

I've aggregated all images with class "img". Every image click adds class "visited":

$(".img").click(function() {
    $(this).addClass("visited");
});

On submit you check class "visited" and display required mark:

$("#submit").click(function() {
    $("img").each(function() {
        $(this).after($(this).hasClass("visited") ? "Yes":"No"); // or that you need
    });
    return false;
});

Here is https://jsfiddle.net/br3t/7g6k8av4/

Upvotes: 1

Related Questions