Показывать кнопку при условии
Добрый день, возник следующий вопрос. Хочу сделать показ кнопки по условию, например: на странице есть блок <div id="status">Свободно, забронировано</div> и есть кнопка <div id="bottom">Подробнее</div>, так вот думаю сделать чтобы при значение в первом блоке "свободно", кнопка появлялась, и наоборот при значении "забронировано" кнопка исчезала. Кто может показать как это реализовать, или может скинуть пример, буду вам благодарен. Спасибо!
|
Цитата:
Т.е. знание о их каком-то "существовании" на странице явно мало... |
<div class="opisanie"> <small>Статус</small><div id="status"><big >Свободна</big></div> </div> <div id="botton"> <a class="show_popup" rel="forma" href="#"></a> </div> попробовал сделать так:
<script>
$('status').each(function(){
var x = $(this).text();
if (x = Забронирована) $('botton').css({display: 'none'});
});
</script>
но не работает |
Цитата:
|
это понятно
|
Цитата:
Цитата:
|
все равно не работает(
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var x = $("#status").text();
if (x == "Забронирована") $('#botton').css({display: 'none'});
});
</script>
</head>
<body> <div class="opisanie">
<small>Статус</small><div id="status"><big >Забронирована</big></div>
</div>
<div id="botton">
<a class="show_popup" rel="forma" href="#">ОЙ</a>
</div>
</body>
</html>
|
вот теперь все работает, спасибо!!!
|
а вот смотрите, если допустим при данном условии изменить цвет шрифта, будет так:
if (x == "Забронирована") $('#botton-page').css({color: '#e10f10'});
или можно так
if (x == "Забронирована") $('#botton-page').css({display: 'none',color: '#e10f10'});
? |
Цитата:
|
разобрался, еще раз спасибо)))
|
у ячейки таблицы класс column-7, делаю чтобы при условии (забронирована) ячейка окрашивалась другим цветом, сделал вот так:
<script>
$(function(){
var x = $("td.column-7").text();
if (x == "Забронирована") $('td.column-7').css({background: '#f3f3f3' });
});
</script>
только вот что-то не работает данная функция |
РустамRu,
циклом проверяйте а не все хором |
пока не так силен в js, что значит циклом и как это?
|
РустамRu,
смотрите свой пост №3 и попробуйте его исправить с учётом полученных знаний. или сделайте макет хотябы |
спасибо)
|
сделал вот так:
<script>
$('td.column-7').each(function(){
var x = $(this).text();
if (x = "Забронирована") $('tr').css({background: '#f3f3f3'});
});
</script>
работает, только вот закрашиваются все строки, а как можно сделать чтобы закрашивалось именно та строка где содержится слово (забронирована) ? |
Цитата:
И опять букварь... http://javascript.ru/comparison-operators |
второй знак = забыл) но не в этом дело, а в том что он закрашивает все строки таблицы, а нужно только ту строку в которой находится слово (забронирована), или же хотя бы ячейку с данным словом
|
РустамRu,
таблицу нарисуйте, минимальный html |
Цитата:
|
РустамRu, ты читал это?
http://javascript.ru/forum/site/4917...u-zapuska.html |
<script>
$('td.column-7').each(function(){
var x = $(this).text();
if (x == "Забронирована") $(this).css({background: '#f3f3f3'});
});
</script>
<table> <tbody class="row-hover"> <tr class="row-2"> <td class="column-1">...</td><td class="column-2">...</td><td class="column-3">...</td><td class="column-4">...</td><td class="column-5">...</td><td class="column-6">...</td><td class="column-7">Свободна</td><td class="column-8"><a href="">...</a></td> </tr> <tr class="row-3"> <td class="column-1">...</td><td class="column-2">...</td><td class="column-3">...</td><td class="column-4">...</td><td class="column-5">...</td><td class="column-6">...</td><td class="column-7">Продана</td><td class="column-8"><a href="">...</a></td> </tr> <tr class="row-4"> <td class="column-1">...</td><td class="column-2">...</td><td class="column-3">...</td><td class="column-4">...</td><td class="column-5">...</td><td class="column-6">...</td><td class="column-7">Забронирована</td><td class="column-8"><a href="">...</a></td> </tr> </tbody> </table> теперь работает, закрашивается ячейка) а вот как строку закрасить пока додумать не могу) |
РустамRu,
$(this).parent().css |
большое спасибо!!! все получилось как надо)
|
а как можно подсчитать количество ячеек со словом (Забронирована), что-то ничего подобного пока не нашел, может подскажите в какую сторону двигаться?
|
Цитата:
|
спасибо) буду думать)
|
Цитата:
<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
alert('Таких ячеек - '+$('td:contains("Забронирована")').length+' шт.');
});
</script>
</head>
<body>
<table>
<tbody class="row-hover">
<tr class="row-2">
<td class="column-1">...</td><td class="column-2">...</td><td class="column-3">...</td><td class="column-4">...</td><td class="column-5">...</td><td class="column-6">...</td><td class="column-7">Свободна</td><td class="column-8"><a href="">...</a></td>
</tr>
<tr class="row-3">
<td class="column-1">...</td><td class="column-2">...</td><td class="column-3">...</td><td class="column-4">...</td><td class="column-5">...</td><td class="column-6">...</td><td class="column-7">Продана</td><td class="column-8"><a href="">...</a></td>
</tr>
<tr class="row-4">
<td class="column-1">...</td><td class="column-2">...</td><td class="column-3">...</td><td class="column-4">...</td><td class="column-5">...</td><td class="column-6">...</td><td class="column-7">Забронирована</td><td class="column-8"><a href="">...</a></td>
</tr>
</tbody>
</table>
</body>
</html>
P.S. Вот это и есть тестовый пример, да еще с возможностью запуска... ;) |
все так просто) именно на странице с таблицей не работает, а на всех остальных все показывает, буду разбираться. Спасибо)
|
<area id="squidhead" title="Статус: Свободна " alt="Link" data-maphilight="{"stroke":false,"fillColor":"fdff5a","fillOpacity":0.6}" />
при наведении сделал всплывающий title с помощью tooltip, вот думаю сделать изменение цвета шрифта при условии, что title содержит слово (свободна)
<script>
$(function(){
var x = $("area title").text();
if (x == "Свободна") $('area title').css({color: '#fff');
});
</script>
но что-то ничего не получается, ни какой реакции в изменении цвета, что делаю не так? |
Цитата:
|
а как я его сделаю если он не работает
|
Цитата:
Цитата:
|
Цитата:
Или можно предложить другие варианты решения... |
.tooltip отвечает за оформление атрибута title, но и его использование не помогает
|
РустамRu, т.е. тестовый пример от тебя мы так и не увидим? :(
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.tooltip{
position:absolute;
z-index:60;
left:-9999px;
background:#8db24b;
padding:5px 5px 5px 20px;
max-width:108px;
height:81px;
font-size:14px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/jquery.maphilight.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/scriptetag.js"></script>
<script type="text/javascript">
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:1, display:"none"}).fadeIn(10);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+0});
}).mouseout(function(){
my_tooltip.fadeOut(10);
});
});
}
$(document).ready(function(){
simple_tooltip("area","tooltip");
});
</script>
<script>
$(function(){
var x = $("area title").text();
if (x == "Свободна") $('area title').css({color: '#fff');
});
</script>
</head>
<body>
<img src="" width="100" height="30" class="map" usemap="#simple" />
<map name="simple">
<area id="squidhead" title="Статус: Свободна " alt="Link" data-maphilight="{"stroke":false,"fillColor":"fdff5a","fillOpacity":0.6}" />
</map>
</body>
</html>
вот) |
РустамRu,
что-то у вас с логикой сначала атрибут удалить потом его искать ... где } строка 48
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.tooltip{
position:absolute;
z-index:60;
left:-9999px;
background:#8db24b;
padding:5px 5px 5px 20px;
max-width:108px;
height:81px;
font-size:14px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/jquery.maphilight.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/scriptetag.js"></script>
<script type="text/javascript">
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);
$(this)
//.removeAttr("title")
.mouseover(function(){
my_tooltip.css({opacity:1, display:"none"}).fadeIn(10);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+0});
}).mouseout(function(){
my_tooltip.fadeOut(10);
});
});
}
$(document).ready(function(){
simple_tooltip("area","tooltip");
});
</script>
<script>
$(function(){
var x = $("area").attr("title");
if (x == "Статус: Свободна ") $('area').css({color : '#fff'});
alert($('map').html())
});
</script>
</head>
<body>
<img src="" width="100" height="30" class="map" usemap="#simple" />
<map name="simple">
<area id="squidhead" title="Статус: Свободна " alt="Link" data-maphilight="{"stroke":false,"fillColor":"fdff5a","fillOpacity":0.6}" />
</map>
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:10. |