jquery ui.slider：ハンドルを表示/非表示にするクリックイベントを追加

Question

私はJavaScriptとjqueryを完全に新しいです。私のプログラミングの知識はありません...存在しない、私はちょうどcssクラスを置き換えるかdivを切り替えるようないくつかの簡単なタスクで数日前に始めました。だから私はここで初心者の質問をすることによって誰かのつま先を歩いている場合は謝罪したい。しかし、私は誰かが私を助け、私の問題を解決できることを願っています。

調査のための視覚的アナログスケールを実装する必要があります。 ui.sliderはそれに最適です。しかし、私はハンドルがデフォルトで隠される必要があります。ユーザーがスライダーをクリックすると、ハンドルが適切な位置に表示されます。それはかなりシンプルでなければなりません。少なくとも、CSSでハンドルを隠し、スライダのクリックイベントで変更するだけで、私はそう望みます。

次のコードを使用して、通常のdiv（jquery slider.jsをjquery slider.jsを適用するにはdivが必要です）を入力要素にラップします（少なくとも視覚的にはスライダで置き換える必要があります）スライダの値を入力要素に渡します（値をフォームに渡すために必要です）。それは適切に動作します。スライダーハンドルを隠す

$(function() { 
$.each($('.slider'), 
function() { 
    obj = $(this); 
    obj.wrap('<div></div>'); 
    obj.parent().slider({ 
     change: function(event, ui) { 
      $('input', this).val(ui.value); 
     } 
    }); 
}); 
}); 

によって行うことができます（私の代わりに、私はいくつかのPHPのように調査のフォーム要素を生成しますスクリプトに影響を与えることができないので、単にデフォルトで私のDOMでのdivを置くことを行います）スタイルプロパティをa.ui-slider-handleに変更することにより、上述のCSSを適用します。しかし、通常のクリックイベントをスライダーに追加すると、ハンドルのCSSプロパティが変更されても何も起こりません。(.ui-slider)私の基本的な知識があれば、生成されたDOM要素で動作していないclickイベントと何か関係があります。私はそれで正しいですか？はいの場合：どうすればこの問題を解決できますか？誰かが私の機能のためのコードを提供し、それを説明して、何が起こっているのかを理解することができますか？

learnjquery.comのイベントに関するチュートリアルを読んでいますが、JS/jqueryを使用して手順を理解し、それを私の例/問題に変換してから、ここ数日は十分な進歩を遂げていません。そして私は時間がなくなりました（私はできるだけ早く調査しなければならないので、誰かが私にこのヒントを与えることができれば、この小さな問題は何とか解決できると思うのです）。

ありがとう、 Marc。

Answer 1

クリックするだけではなく、変更イベントにショーを含めることはできますか？まったく新しいイベントを組み込むのではなく、コードに則ったやり方が少し洗練されています。

$(function() { 
    $('.slider').wrap('<div></div>').parent().slider({ 
    change: function(event, ui) { 
     $('input', this).val(ui.value); 
     $('.ui-slider-handle').show(); 
    } 
    }); 
}); 

はまた、冗長性のビットがコードにあった - 最もjQueryの関数はオブジェクト自身を返すので、あなたはそれらをチェーンすることができます。ほとんどのjQuery関数は、コレクションに適用すると、それらのすべてで実行されるので、各関数を必要としません:)