此HTML通过按下按钮使站点背景改变颜色,并通过按图像更改背景图像。但我不知道如何制作文字链接而不是图像会改变背景图像。
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
background: no-repeat;
}
</style>
<meta charset="utf-8">
<script>
function change_color(obj)
{
obj.value && (document.body.style.backgroundColor = obj.value);
obj.src && (document.body.style.backgroundImage = 'url('+obj.src+')');
}
</script>
</head>
<body>
<form method="post" action="1.php" onsubmit="return false">
<button class="color" id="red" name="button" value="red" onclick='change_color(this)'>red</button>
<button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'>orange</button>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" onclick='change_color(this)'>
<img src="http://javascript.ru/forum/images/smilies/victory.gif" alt="" onclick='change_color(this)'>
</form>
</body>
</html>
答案 0 :(得分:3)
由于您在问题中标记了jQuery,因此这里的jQuery等同于您的代码:
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields', 20, 1 );
// Our hooked in function - $address_fields is passed via the filter!
function custom_override_default_address_fields( $address_fields) {
unset($address_fields['company']);
unset($address_fields['address_2']);
unset($address_fields['country']);
unset($address_fields['state']);
unset($address_fields['postcode']);
$shipping_method ='local_pickup:1'; // Set the desired shipping method to hide the checkout field(s).
global $woocommerce;
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping = $chosen_methods[0];
if ($chosen_shipping == $shipping_method) {
// Delete address_1 field
unset($address_fields['address_1']);
} else {
// Return address_1 field
$address_fields['city'] = array(
'type' => 'text',
'label' => __('House number and street name', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
}
return $address_fields;
}
JS:
<a href="#_" class="change-color" data-color="red">Change Color</a>
答案 1 :(得分:2)
你的意思是基于文本的超链接? e.g。
<a href="#_" onclick="change_color(this)">Change Color</a>
答案 2 :(得分:0)
您可以将src
保存为自定义属性data-src
,并设置href="#"
以避免在用户点击链接时进行导航。
<a href="#" data-src="http://javascript.ru/forum/images/smilies/victory.gif" onclick="change_color(this)">Smiley</a>
然后,您可以在点击处理程序中添加以下内容以获取图像位置,并在DOM上更新它:
obj.attributes["data-src"] && (document.body.style.backgroundImage = 'url(' + obj.attributes["data-src"].value + ')');
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
background: no-repeat;
}
</style>
<meta charset="utf-8">
<script>
function change_color(obj) {
obj.value && (document.body.style.backgroundColor = obj.value);
obj.src && (document.body.style.backgroundImage = 'url(' + obj.src + ')');
obj.attributes["data-src"] && (document.body.style.backgroundImage = 'url(' + obj.attributes["data-src"].value + ')');
}
</script>
</head>
<body>
<form method="post" action="1.php" onsubmit="return false">
<button class="color" id="red" name="button" value="red" onclick='change_color(this)'>red</button>
<button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'>orange</button>
<a href="#" data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" onclick="change_color(this)">Logo</a>
<a href="#" data-src="http://javascript.ru/forum/images/smilies/victory.gif" onclick="change_color(this)">Smiley</a>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" onclick='change_color(this)'>
<img src="http://javascript.ru/forum/images/smilies/victory.gif" alt="" onclick='change_color(this)'>
</form>
</body>
</html>