2017-10-23 8 views
0

私はプロジェクトのような/嫌いなシステムを構築しようとしています、そして、私は最後の部分でいくつかの問題を抱えています。javascriptボタンと他の要素のクラスを変更

好き/嫌いなシステムが動作していますが、クリック(クラスとアイコンの変更)後にボタンを自動的に変更したいと思います。

これは、多くの行に基づいて取り組んでいると、それらのそれぞれは、この方法で(のような)である:PHPで

<button type='button' onClick='LikeDislike($row_data[id], $row_data[cat], 
$row_data[scat], $row_data[sscat], $_SESSION[user_id]);' class='btn btn-info 
pull-right btn-xs'><i class='fa fa-thumbs-up'></i></button> 

ページのロードに示すボタンがベースを好きか嫌いですので、私はすでにコードを作りました似ているかどうかは分かりません。 「私はこのコードのような/嫌いを設定する作業をしてい

<button type='button' onClick='LikeDislike($row_data[id], $row_data[cat], 
$row_data[scat], $row_data[sscat], $_SESSION[user_id]);' class='btn btn- 
danger pull-right btn-xs'><i class='fa fa-thumbs-down'></i></button> 

が、私のことができます。

同じである「嫌い」するボタンは、ボタンのみのクラスとのクラスを変更しますTボタンのクラスと、その特定のボタン内のクラスに変更する方法を取得:私はPHPでそれをやったとして、だから、

$.ajax({ 
    type:'POST', 
    url:'inc/like.php', 
    data:'id='+id+'&cat='+cat+'&scat='+scat+'&sscat='+sscat+'&uid='+uid, 
    success:function(msg){ 
     if(msg == 'err'){ 
      /** alert('Some problem occured, please try again.'); **/ 
      $.toast({ 
       heading: 'Error!', 
       text: 'There was a problem processing your like.', 
       position: 'top-right', 
       loaderBg: '#ff6849', 
       icon: 'error', 
       hideAfter: 3500 
       }); 
     }else{ 
     $.toast({ 
     heading: 'Success!', 
     text: msg, 
     position: 'top-right', 
     loaderBg: '#ff6849', 
     icon: 'success', 
     hideAfter: 3500, 
    }); 
     if(msg == "Like added."){ 
      alert(1); 
      //** Remove Class btn-info and add class of button to btn-danger. 
      //* Change class of the <i> element to fa-thumbs-down (inside that button) 
     }else{ 
      alert(2); 
      //** Remove Class btn-danger and add class of button to btn-info. 
      //* Change class of the <i> element to fa-thumbs-up (inside that button) 
     } 

     } 
    } 
}); 
} 

を、いくつかの好き/嫌いの後、リスト中のいくつかのアイコンが(diferenteですいくつかは好きで嫌いになる)

そのページのすべてのボタンではなく、特定のボタンにのみ有効であることに注意してください。

簡単な方法はありません。誰でも私を助けることができますか?おかげさまで

答えて

0

LikeDislikeのボタンにthisというキーワードを使用してボタンを渡すことができます。あなたはAjaxコードを扱うその後

<button type='button' 
     onClick='LikeDislike(this, $row_data[id], $row_data[cat], $row_data[scat], $row_data[sscat], $_SESSION[user_id]);' 
     class='btn btn-info pull-right btn-xs'> 
    <i class='fa fa-thumbs-up'></i> 
</button> 

は、次の操作を実行できます。

function(ele, a, b, c, d) { 
    $.ajax([...], 
     success: function(){ 
      // Do whatever you like... 

      ele.find('> i').removeClass('some-class').addClass('other-class'); 
     } 
    ); 

} 
0

が、私はそれをしなかった、それを行うための最善の方法になり希望を。 この情報が必要な人のために、私はここに答えを残しました:

最初に、私はボタンにIDとクラスを別に設定しました。 ボタンIDはボタンの内側 elementoは、(上記のコメント)if文では、

その後1_1、2_1、3_1 ..として設定されている... 1,2,3,4のように設定されます。

  if(msg == "Like added."){ 
      document.getElementById(id).className = 'btn btn-danger pull-right btn-xs'; 
      document.getElementById(id+"_1").className = 'fa fa-thumbs-down'; 
     }else{ 
      document.getElementById(id).className = 'btn btn-info pull-right btn-xs'; 
      document.getElementById(id+"_1").className = 'fa fa-thumbs-up'; 
     } 
関連する問題