0

クリックした要素のクラス名をテキスト入力に表示する必要があります。次のコードを参照してください。

JSFiddle DEMO

@arun-p-johny による実用的なソリューションを含む更新されたデモ(Thanks!)

HTML:

<ol>
  <li>
      <input type="text" name="status{{photo.id}}" class="markinput" id="status{{photo.id}}" value="neutral" />
    <a href="#" class="mark neutral" title="Toggle yes, no or neutral."><b>Yes</b><i>No</i>Neutral</a>
  </li>
</ol>

jQuery:

// Toggle between selected, rejected and neutral settings
var classNames = ['yes', 'no', 'neutral'];

$( '.mark' ).click(function () {
    var $this = $(this);
    $this.toggleClass(function (i, className, b) {
        var ret_index;
        $.each(classNames, function (index, value) {
            if ($this.hasClass(value)) {
                ret_index = (index + 1) % classNames.length;
            }
        });
        $this.removeClass(classNames.join(' '));
        return classNames[ret_index];
        // Need to toggle value of input based on adjacent element class
        // $this.closest("input").val(?????????);
    });
});
4

1 に答える 1

0

試す

<ol>
    <li>
        <input type="text" name="status{{photo.id}}" class="markinput" id="status{{photo.id}}" value="neutral" /> 
        <a href="#" class="mark neutral" title="Toggle yes, no or neutral."><b data-class="yes">Yes</b><i data-class="no">No</i><span data-class="neutral">Neutral</span></a>
    </li>
</ol>

それから

var classNames = ['yes', 'no', 'neutral'];

$('.mark').click(function (e) {
    var $this = $(this);
    var clazz = $(e.target).data('class');
    $this.removeClass(classNames.join(' ')).addClass(clazz);
    $this.prev("input").val(clazz)
});

デモ:フィドル

于 2013-10-02T10:41:14.450 に答える