У меня есть div на странице aspx, приведенной ниже. У меня есть страница, содержащая код и стиль для рабочего стола и мобильных устройств. Я хочу показать show hide div согласно условию. используя id (более 50 div на странице), это увеличивает код и идентификатор, используя класс, который приведен выше "рабочий стол" и "мобильный", уменьшает код.
<div class="desktop" runat="server">
<p>this desktop version1</p>
</div>
<div class="Mobile" runat="server">
<p>this mobile version1</p>
</div>
<div class="desktop" runat="server">
<p>this desktop version1</p>
</div>
<div class="Mobile" runat="server">
<p>this mobile version1</p>
</div>
<div class="desktop" runat="server">
<p>this desktop version1</p>
</div>
<div class="Mobile" runat="server">
<p>this mobile version1</p>
</div>
<div class="desktop" runat="server">
<p>this desktop version1</p>
</div>
Я хочу показать hide div, используя div-класс (не div id) на стороне сервера.
protected void Page_Load(object sender, EventArgs e)
{
}
Наконец, я нахожу решение этого, если какой-либо запрос об этом, пожалуйста, ответьте.
protected void Page_Load(object sender, EventArgs e)
{
string theClass;
theClass = "desktop";
var theControls = FindByClass(theClass);
foreach (Control item in theControls)
{
//do something;
if (item is WebControl)
{
((WebControl)item).Visible = false;
}
else
{
((HtmlControl)item).Visible = false;
}
}
}
private IEnumerable FindByClass(string theClass)
{
Control[] allControls = FlattenHierachy(Page);
var theControls = from n in allControls
where ((n is WebControl)
&& ((WebControl)n).CssClass.Contains(theClass))
|| (n is HtmlControl
&& ((HtmlControl)n).Attributes.Count > 0
&& ((HtmlControl)n).Attributes["class"] != null
&& ((HtmlControl)n).Attributes["class"].IndexOf(theClass) > -1)
select n;
return theControls;
}
public static Control[] FlattenHierachy(Control root)
{
List<Control> list = new List<Control>();
list.Add(root);
if (root.HasControls())
{
foreach (Control control in root.Controls)
{
list.AddRange(FlattenHierachy(control));
}
}
return list.ToArray();
}
Как уже упоминалось в комментариях, гораздо лучше использовать медиа-запросы в вашем случае.
Но позвольте просто остаться с вашим вопросом, игнорируя причину. Вы можете найти все элементы управления рекурсивно, а затем скрыть их:
private IEnumerable<HtmlGenericControl> FindControls(ControlCollection controls, string className)
{
foreach (Control control in controls)
{
var c = control as HtmlGenericControl;
if (c != null)
{
var classAttribute = c.Attributes["class"];
if (classAttribute != null)
if (classAttribute.Equals(className))
yield return c;
}
if (control.HasControls())
foreach (var subControl in FindControls(control.Controls, className))
yield return subControl;
}
}
protected void Page_Load(object sender, EventArgs e)
{
var a = FindControls(Page.Controls, "Mobile").ToList();
a.ForEach(p=>p.Visible = false);
}
Вы можете добиться этого, используя jquery. Просто поместите свой код в тег заголовка
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
function test() {
if(condition)
{
$(".first").hide();
}
else
{
$(".first").show();
}
}
</head>
Теперь вы сначала вызываете это на любом событии, например, при нажатии кнопки. Затем Поместите свое условие, чтобы скрыть или показать div внутри блока "if". Это отлично работает для меня.