web-dev-qa-db-ja.com

jquery：タイトル属性を非表示にしますが削除しません

ほとんどの人が、マウスオーバーでTITLE属性の値を取得し、その値を削除するこのソリューションを使用してそれを実行することを確認しました。マウスを外している間、元に戻します。

$(this).attr('title','');

または

$(this).removeAttr('title');

タイトル属性を削除するよりも、ツールチップを非表示にすることは可能ですか？

ありがとう！

jqueryattributestitle
15
laukok

いいえ、できません。ブラウザがtitle属性をどう処理するかを決定するからです。ただし、後で参照するために（そしておそらくタイトルを復元するために）ノードに保存することができます。

$(this).data("title", $(this).attr("title")).removeAttr("title");
33
FRotthowe

これは機能します。

    $(document).ready(function(){
        $( "a" )
                .mouseenter(function() {        
                        var title = $(this).attr("title");
                        $(this).attr("tmp_title", title);
                        $(this).attr("title","");
                })
                .mouseleave(function() {
                        var title = $(this).attr("tmp_title");
                        $(this).attr("title", title);
                })
                .click(function() {     
                        var title = $(this).attr("tmp_title");
                        $(this).attr("title", title);
                });
        });
      });
9
Ridwan Pujakesuma

マウスが要素の上にある間、タイトルを別の場所に保存できます。ただし、DOM自体に保存する必要はありません。あなたはJS変数にそれを保つことができます：

(function(){
  var ttext;
  $(yourtargetselectorhere).hover(function(){
    ttext = $(this).attr('title');
    $(this).removeAttr('title');
  },
  function(){
    $(this).attr('title', ttext);
  });
}());
6
Dan Davies Brackett

あなたの解決策をありがとう。プロジェクトでも同じ問題がありました。問題は、画像にカーソルを合わせると長い醜いタイトルが表示され、タイトル属性に商品への購入リンクを配置するため、ポップアップにタイトルが必要でした。先ほど言ったように、タグを含む長いタイトルがホバーに表示されていました。ソリューションの最後に.click関数を追加しただけなので、jqueryのエキスパートではないため、これをよりセマンティックな方法で解決できるかどうかはわかりません。以下に、完全なスクリプトを貼り付けます。

    $(".collection-box a").hover(function(){

    // Get the current title
    var title = $(this).attr("title");

    // Store it in a temporary attribute
    $(this).attr("tmp_title", title);

    // Set the title to nothing so we don't see the tooltips
    $(this).attr("title","");
    },

    function() { // Fired when we leave the element

    // Retrieve the title from the temporary attribute
    var title = $(this).attr("tmp_title");

    // Return the title to what it was
    $(this).attr("title", title);
    });


   //Restore the title on click
    $(".collection-box a").click(function(){

   // Retrieve the title from the temporary attribute
    var title = $(this).attr("tmp_title");

    // Return the title to what it was
    $(this).attr("title", title);
    });
3
Akin G.

できません。 preventDefault()メソッドはこれには機能しないようです。これは理想的であるため、残念です。

タイトル属性を保持する必要がある場合は、次のようにします。

$(document).ready(function(){
        $("a").hover(function(){

        // Get the current title
        var title = $(this).attr("title");

        // Store it in a temporary attribute
        $(this).attr("tmp_title", title);

        // Set the title to nothing so we don't see the tooltips
        $(this).attr("title","");
        },

        function() { // Fired when we leave the element

        // Retrieve the title from the temporary attribute
        var title = $(this).attr("tmp_title");

        // Return the title to what it was
        $(this).attr("title", title);
        });
});

しかし、それはかなり複雑です。タイトル属性を保持する必要がある特別な理由がない限り、私はそれらを削除します。

1
George Mandis