Question

<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>

嗨这是我的代码，我在其中添加了一个提交按钮。当我点击提交时，我需要显示已访问图像的刻度标记和被邀请图像的十字标记。如何为此编写代码？请任何人帮助我

Answer 1

我已经用课程＆＃34; img＆＃34;汇总了所有图片。每次点击图片都会添加课程＆＃34;访问过＆＃34;：

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

在提交时，请检查课程＆＃34;已访问＆＃34;并显示所需的标记：

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

这是https://jsfiddle.net/br3t/7g6k8av4/

Answer 2

这里有工作样本..请考虑价值观＆＃39;访问＆＃39;并且没有去过＆＃39;各个图像。

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

还添加了一些功能和css更改

test_helper.js

在jquery中为访问过的图像添加图标

2 个答案: