ホームページ ウェブフロントエンド jsチュートリアル Taobao star ratings_jquery と同様の機能を実装した jquery の例

Taobao star ratings_jquery と同様の機能を実装した jquery の例

May 16, 2016 pm 04:36 PM
jquery 関数 タオバオ

この記事の例は、jquery がどのように淘宝網の星評価関数を実装するかを説明しており、参考のために共有されています。具体的な方法は以下の通りです。

コードの HTML 部分は次のとおりです:

<body>
  <div id="div">
    <ul>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
    </ul>
  </div>
  <p id="p"></p>
  <p id="score"></p>
</body>

ログイン後にコピー

上記のコード内:

id="p"リアルタイムスコアを表示

id="score" は最終スコアを表示します

JavaScript コードは次のとおりです:

<script type="text/javascript">
$(function () {
  //为所有的li标签绑定mouseout和mouseover事件。bind({事件名:function(){},事件名:function(){}})的方法绑定多个事件
  $("#div li").bind({
 mouseout:function () {
   $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")
 },
 mouseover: function () {
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
 }
  });
  //=实时显示分数.【index】搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
   $("#div li").mouseover(function () {
   $("#p").html(parseInt( $(this).index("#div li"))+1);
 });
  //鼠标按下时,确定分数。额,就不更改了,大局已定。
 $("#div li").mousedown(function () {
   $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
   //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
   $(this).unbind().prevAll().unbind().nextAll().unbind();
 });
  })
</script>

ログイン後にコピー

この記事が皆様の jQuery WEB プログラミングのお役に立てれば幸いです

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vivox100sとx100の違い:性能比較と機能分析 vivox100sとx100の違い:性能比較と機能分析 Mar 23, 2024 pm 10:27 PM

vivox100s と x100 携帯電話はどちらも vivo の携帯電話製品ラインの代表的なモデルであり、それぞれ異なる時代における vivo のハイエンド技術レベルを代表するものであるため、2 つの携帯電話にはデザイン、性能、機能に一定の違いがあります。この記事では、消費者が自分に合った携帯電話をより適切に選択できるように、これら 2 つの携帯電話を性能比較と機能分析の観点から詳しく比較します。まずはvivox100sとx100の性能比較を見てみましょう。 vivox100s には最新の機能が搭載されています。

タオバオの無料赤い封筒 2024 を入手する方法 タオバオの無料赤い封筒 2024 を入手する方法 May 09, 2024 pm 03:22 PM

2024年のタオバオ無料注文イベントは1日3回開催され、誰もが対応する時間に対応する量の商品を注文し、支払う必要があります。無料注文金額は同額の赤い封筒の形で配布されます。次に、2024 年に淘宝網の無料注文の赤い封筒を受け取る方法を紹介します。それを入手します。無料のユーザーの場合、赤い封筒の資格は、アクティベーション状態にあるカードとクーポンのパッケージに発行されます。タオバオのウェブ版には現在カードとクーポンのパッケージがなく、無料注文イベントの当選記録のみが表示されます。カードとクーポンのパッケージは [淘宝網 APP - 私の淘宝網 - 私の権利 - 赤い封筒] にあります。淘宝網の無料赤い封筒を入手する方法 20241. 無料の注文を獲得したユーザーには、有効化を待機している状態のカードとクーポン パッケージに赤い封筒の資格が配布されます。 2. 現在、淘宝網の Web バージョンでは、カードとクーポンのパッケージがあり、無料注文アクティビティの当選記録のみが表示されます。 ;3. カード クーポン パッケージは [淘宝網 APP - 私の淘宝網 - 私の権利 - 赤い封筒] にあります。

タオバオで名前を変更する方法 タオバオで名前を変更する方法 Mar 24, 2024 pm 03:31 PM

名前変更機能を使用すると、ユーザーはタオバオで自分の名前とニックネームを自由に変更できます。一部のユーザーはタオバオで名前を変更する方法がわかりません。マイ タオバオの設定でアバターのタオバオ アカウントをクリックするだけで変更できます。次に、編集者がお届けします 名前とニックネームの変更方法を紹介しますので、まだご存じない方はぜひダウンロードして試してみてください。タオバオの使い方チュートリアル タオバオの名前変更方法 答え: マイ タオバオの設定でアバターのタオバオ アカウントをクリックして変更します 詳細: 1. タオバオに入り、右下の[マイ タオバオ]をクリックします。 2. 右上の[設定]アイコンをクリックします。 3. アバターをクリックします。 4. もう一度[タオバオアカウント]をクリックします。 5. [アカウント名の変更]をクリックし、入力・変更します。

タオバオで赤い封筒のリマインダーをオフにする方法 タオバオで赤い封筒のリマインダーをオフにする方法 Apr 01, 2024 pm 06:25 PM

タオバオは、多くの友人がよく使用するオンライン ショッピング ソフトウェアです。あなたは通常、タオバオで注文したり、さまざまなものを購入したりします。ユーザーに赤い封筒のリマインダー機能を提供します。これをオフにしたいという友人もいます。急いで PHP 中国語をチェックしてください。ウェブサイトをご覧ください。タオバオで赤い封筒のリマインダーをオフにする手順のリスト 1. タオバオ APP のパーソナルセンターを開き、[設定] ボタンを選択してページに入ります。 2. [メッセージ通知] オプションを見つけて、メッセージプッシュスイッチを選択し、赤い封筒のメッセージを見つけてスイッチをオフにします。 3. または、携帯電話の設定ページから淘宝アプリの通知許可をオフにすることもできます。これにより、淘宝網からのすべてのメッセージはプッシュされず、通知許可をオンにした後にのみ表示されます。 4. 受信するメッセージの種類をユーザーが設定できるため、使いやすくなります。

「タオバオ」の無料紅包の返金は返ってくるのでしょうか? 「タオバオ」の無料紅包の返金は返ってくるのでしょうか? May 08, 2024 am 08:16 AM

タオバオで買い物をするとき、割引を受けるために無料の赤い封筒をよく使います。しかし、返金が必要な場合、この無料の赤い封筒は返却されるのでしょうか?この質問に対する答えを見てみましょう。タオバオの無料の赤い封筒は返金されますか? 状況によっては、赤い封筒を受け取ったときに、製品を引き換える前に赤い封筒がアクティブ化保留状態になっているため、アクティブ化される赤い封筒は使用できません。購入した製品の受領が確認されるまで一時的に待機し、アクティベートする必要がある赤い封筒を使用できます。無料の赤い封筒を使用した後に製品に問題があり、返品する必要がある場合、赤い封筒の返却は実際の状況に応じて判断する必要があります。 1. 返金ルール 11. 返品後に返金が発生した場合赤い封筒を使用した場合、赤い封筒は比例して返却されます。 2. 返却期限を過ぎていない場合は、返却された赤い封筒の使用期間が本来の使用期限となります。期限を過ぎた場合は7日以内に発行されます。

「タオバオ」510無料紅封筒の使い方 「タオバオ」510無料紅封筒の使い方 May 08, 2024 pm 10:00 PM

タオバオ510の無料赤い封筒の使い方は?タオバオは最近、510周年を記念して無料注文イベントを開始しました。このイベントでは、多くの特典があり、このイベントに参加したいと考えている友人もいます。ですが、具体的な使い方がわかっている場合は、今日の関連する紹介を見てみましょう。タオバオの 510 周年記念無料注文レッド パックの使用手順: 無料注文レッド パックは、推測質問のためのすべての注文が確認され受信された後に使用できます。 1. ユーザーはウェブ版淘宝網を通じて無料の赤い封筒を発行および回収することができます。現在、カードとクーポンのパッケージはありませんが、[淘宝網 APP - 私の淘宝網 - 私の権利 - 赤い封筒] で見ることができます。無料の注文を取得したユーザーには、赤い封筒の資格がカードとクーポンのパッケージに配布され、カードとクーポンのパッケージは賞品獲得のために有効化されています。

セルフメディアとは一体何でしょうか?その主な特徴と機能は何ですか? セルフメディアとは一体何でしょうか?その主な特徴と機能は何ですか? Mar 21, 2024 pm 08:21 PM

インターネットの急速な発展に伴い、セルフメディアという概念が人々の心に深く根付いてきました。では、セルフメディアとは一体何でしょうか?その主な特徴と機能は何ですか?次に、これらの問題を 1 つずつ検討していきます。 1. セルフメディアとは何ですか? We-media は、その名前が示すように、あなたがメディアであることを意味します。これは、個人またはチームがインターネット プラットフォームを通じてコン​​テンツを独自に作成、編集、公開、配布できる情報媒体を指します。新聞、テレビ、ラジオなどの従来のメディアとは異なり、セルフメディアはよりインタラクティブでパーソナライズされており、誰もが情報の制作者および発信者になることができます。 2. セルフメディアの主な特徴と機能は何ですか? 1. 敷居が低い: セルフメディアの台頭により、メディア業界への参入の敷居が低くなり、煩わしい機材や専門チームは必要なくなりました。

タオバオストアの登録プロセス タオバオストアの登録プロセス Mar 25, 2024 pm 01:37 PM

1.タオバオアプリを開き、右下の[マイタオバオ]をクリックし、右上の[設定]をクリックします。 2. [加盟店決済]を選択し、[タオバオストアを開く]をクリックし、[一般加盟店]を選択します。 3. [無料出店]画面では、[個人加盟店]出店の具体的なプロセスを確認することができます。 4. ストア名を入力し、[ストアを開く] をクリックし、3 つの項目すべてにチェックを入れて、[0 元でストアを開く] をクリックします。 5. 最後に【本人認証】を完了し、【店舗基本情報】を入力すると無事出店できます。

See all articles