2017-08-31 18 views
0

Djangoのクエリーセットから、各オブジェクトのname、url、およびaspect属性をラベルに渡すカスタムラベルを使用してCustomChoiceFieldを作成しました。ここでforms.pyから該当するコードがあります:JQueryを使用してDjango Radioselectフォームからラベルの属性を取得

class CustomChoiceField(forms.ModelChoiceField): 
    def label_from_instance(self, obj): 
     return mark_safe("<span class='%s'>%s</span><img src='%s' class='teams__filter__image'/>" % (obj.aspect, obj.name, obj.image.url)) 

filter_pic = CustomChoiceField(required=False, label=mark_safe('Image Filter'), widget=forms.RadioSelect(attrs={'id':'filter-choice'}), queryset=FilterPic.objects.filter(activated=True), empty_label='None') 

それはそうのようなHTMLにレンダリング:

<p class="teams__form__label">Image Filter</p> 
<p><label for="filter-choice_0"><input checked="checked" id="filter-choice_0" name="filter_pic" type="radio" value="" /> None</label></p> 
<p><label for="filter-choice_1"><input id="filter-choice_1" name="filter_pic" type="radio" value="2" /> <span class='0.7'>WeHealth Orange</span><img src='/media/images/2017/08/28/orangefilter.png' class='teams__filter__image'/></label></p> 
<p><label for="filter-choice_2"><input id="filter-choice_2" name="filter_pic" type="radio" value="1" /> <span class='0.7'>WeHealth Blue</span><img src='/media/images/2017/08/28/bluefilter.png' class='teams__filter__image'/></label></p> 

すべてがHTMLで素晴らしく見えます。問題は、次のJavascript関数(cropper.jsアスペクト比)をトリガーするために、のアスペクト属性(ラベルの現在の値属性)が必要であるということです。 Javascriptでアスペクト値を取得するにはどうすればよいですか?

EDIT:

ただ、明確にするために、私は、フォームからのラベルのクラスを取得する方法を探していました。

答えて

0

Iは、ユーザが無線選択肢を選択したときにトリガを作成することになった:

$('input:radio[name="filter_pic"]').change(function() { 

アスペクト比に渡されていたので、私は、その選択のidを同定し、次の要素(のclassを発見その要素のクラス):

var idVal = $(this).attr("id"); 
var aspectClass = $("input[id='"+idVal+"']").next().attr("class"); 

最後に、私は、そのクラスまたは2.0のデフォルトのいずれかに等しくcropAspectを設定:

if (aspectClass) { 
    cropAspect = aspectClass; 
} else { 
    cropAspect = 2; 
} 

以下の全コード:

$image.cropper({ 
    viewMode: 1, 
    aspectRatio: cropAspect, 
    minCropBoxWidth: 200, 
    minCropBoxHeight: 200, 
    rotatable: true, 
    scalable: true, 
    checkOrientation: true, 
    ready: function() { 
     $image.cropper("setCanvasData", canvasData); 
     $image.cropper("setCropBoxData", cropBoxData); 
    } 
}); 

$('input:radio[name="filter_pic"]').change(function() { 
    var idVal = $(this).attr("id"); 
    var aspectClass = $("input[id='"+idVal+"']").next().attr("class"); 
    if (aspectClass) { 
     cropAspect = aspectClass; 
    } else { 
     cropAspect = 2; 
    } 
}); 

私はそのようにようcropper.jscropAspectを渡すことができます

関連する問題