Question

class YourModelForm(forms.ModelForm):

    class Meta:
        model = YourModel


class YourOtherForm(forms.Form):

    non_model_field = forms.CharField(max_length=100)


# view

def your_view(request):

    your_model_form = YourModelForm(request.POST or None)
    your_other_form = YourOtherForm(request.POST or None)

    if request.method == 'POST' and your_model_form.is_valid and your_other_form.is_valid:
        your_model_form.save()

        # handle your_other_form, as forms.Form doesn't have a built-in .save

    return render(request, 'your_template.html',
        {'your_model_form': your_model_form, 'your_other_form': your_other_form})


# template

<form action="." method="post" enctype="application/x-www-form-urlencoded">
    <ul>
        {{ your_model_form.as_ul }}
        {{ your_other_form.as_ul }}
    </ul>
    <button type="submit">Submit</button>
</form>

您好，我想用HTML和JS编写一个网站代码，其中显示了4张图片。如果我按下一张图片，则应调整大小。

是否有可能获得“动态”变量？

我的想法是，获得一个可以包含Bild1，Bild2，Bild3或Bild4内容的新变量，具体取决于之前按下的图片，因此每个案例的功能不同，只是使用不同的单词。

例如：

<script>			
function zeigeBildGross1(Bild1){
    document.getElementById("Bild1").width = 500;
    document.getElementById("Bild1").height = 300;
}
			
function zeigeBildGross2(Bild2){
	document.getElementById("Bild1").width = 500;
	document.getElementById("Bild1").height = 300;
}
			
function zeigeBildGross3(Bild3){
	document.getElementById("Bild1").width = 500;
	document.getElementById("Bild1").height = 300;
}
			
function zeigeBildGross4(Bild4){
	document.getElementById("Bild1").width = 500;
	document.getElementById("Bild1").height = 300;
}
</script>
<noscript>
Bitte JavaScript in Ihrem Browser aktivieren!
</noscript>
</head>
<body>
	<img id="Bild1" width=300 height=200 onclick=zeigeBildGross(Bild1) src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
	<img id="Bild2" width=300 height=200 onclick=zeigeBildGross(Bild2) src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
	<img id="Bild3" width=300 height=200 onclick=zeigeBildGross(Bild3) src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
	<img id="Bild4" width=300 height=200 onclick=zeigeBildGross(Bild4) src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>
</body>

这可能吗？

感谢您的阅读， Stöger

Answer 1

只需将图片的ID传递给函数：

HTML： <img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this.id)">

使用Javascript：

function zeigeBildGross(id){
    document.getElementById(id).width = 500;
    document.getElementById(id).height = 300;
}

清洁版：

<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this)">

使用Javascript：

function zeigeBildGross(bild){
    bild.width = 500;
    bild.height = 300;
}

Answer 2

您不需要创建包含所点击图像的变量，它已作为onclick事件处理程序中的上下文存在。

只需将this作为参数传递给函数，然后您可以使用它来访问该元素：

＆＃13;

function zeigeBildGross(bild){
    bild.width = 500;
    bild.height = 300;
}

＆＃13;

<img id="Bild1" width=300 height=200 onclick="zeigeBildGross(this)" src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
<img id="Bild2" width=300 height=200 onclick="zeigeBildGross(this)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
<img id="Bild3" width=300 height=200 onclick="zeigeBildGross(this)" src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
<img id="Bild4" width=300 height=200 onclick="zeigeBildGross(this)" src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>

＆＃13;

动态可变内容JavaScript

2 个答案: