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>

こんにちは、私は1つの送信ボタンを追加しました。私がサブミットをクリックすると、訪問した画像や目に見えない画像の十字マークを表示する必要があります。誰にも助けてください。jqueryで訪問した画像のアイコンを追加する

出典

2016-12-20 moksha

'：それはあなたのように見えないvisited'スタイル –

は、マークアップのすべてが含まれている - jQueryの中で参照画像を（？） – Rounin

すべての画像をクラス「img」で集計しました。すべての画像クリックでクラスを追加するには、 "訪問"：

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

では、クラスをチェック提出マーク "訪問" と表示が必要：ここ

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

をここhttps://jsfiddle.net/br3t/7g6k8av4/

出典

2016-12-20 09:38:06 br3t

それは働いていますが、私は "はい"と "いいえ"の代わりにアイコンを表示したい – moksha

$（this）.after（$（this）.hasClass（ "visited"）？$（ ".icon"）。show（）：$（ "。cross"）。show（））;私はこれを追加しましたが、単一画像のための複数のアイコンを表示します – moksha

'$（this）.after（$（this））.hasClass（" visited "）？$（"＃icon "、this）.show（）：$（"＃同じIDでいくつかを作成するのは良い考えではありません – br3t

でサンプルを働いてます。..それぞれの画像に「訪問した」と「訪れていない」という値が含まれています。

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

は、いくつかの機能やCSSの変更を追加したも

$('.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'); 
    } 
    });

出典

2016-12-20 10:28:17 Sharmila

mokshaあなたはアイコンが必要ですか？またはソリューション全体が機能していませんか？ – Sharmila

投稿をクリックするとショーアイコンが必要です – moksha

@moksha pls今すぐお試しください – Sharmila

jqueryで訪問した画像のアイコンを追加する

答えて

関連する問題