RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题

全部问题

Martin Hope
Yuri
Asked: 2020-08-02 03:45:14 +0000 UTC

创建自己的函数时出现未知错误

  • 9

我正在编写自己的函数来为伪元素分配属性,并注意到一个未知错误。属性的分配通过向样式表添加行来进行。

当我在第三种情况下调用该函数时,由于某种原因第一个元素被涂成蓝色,尽管color我没有为它设置它。

(function() {
  var setPseudoElement = function(parameters) {
    for (var element of parameters.elements.get()) {
      if (!element.pseudoElements) element.pseudoElements = {
        styleSheet: null,
        before: {
          index: null,
          properties: null
        },
        after: {
          index: null,
          properties: null
        }
      };

      var selector = (function() {
        if (element.id) {
          return '#' + element.id + '::' + parameters.pseudoElement;
        } else {
          var parentsList = $(element).parents().map(function() {
            return this.tagName.toLowerCase();
          }).get().reverse().join(' > ') + ' > ' + element.tagName.toLowerCase();

          var elementClass = element.classList.length ? '.' + $(element.classList).get().join('.') : '';

          var elementAttributes = element.hasAttributes() ? $(element.attributes).get().map(function(className) {
            return className.nodeName !== 'class' ? className.nodeValue ? '[' + className.nodeName + '="' + className.nodeValue + '"]' : '[' + className.nodeName + '"]' : '';
          }).join('') : '';

          var elementNthChild = ':nth-child(' + ($(element).index() + 1) + ')';

          return parentsList + elementClass + elementAttributes + elementNthChild + '::' + parameters.pseudoElement;
        };
      })();

      if (!element.pseudoElements.styleSheet) {
        if (document.styleSheets[0]) {
          element.pseudoElements.styleSheet = document.styleSheets[0];
        } else {
          var styleSheet = document.createElement('style');

          document.head.appendChild(styleSheet);
          element.pseudoElements.styleSheet = styleSheet.sheet;
        };
      };

      if (element.pseudoElements[parameters.pseudoElement].properties !== null && element.pseudoElements[parameters.pseudoElement].index !== null) {
        element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
      };

      if (typeof parameters.argument === 'object') {
        if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

          element.pseudoElements[parameters.pseudoElement].index = newIndex;
          element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
        };

        var properties = '';

        for (var property in parameters.argument) {
          element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
        };

        for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
      } else if (parameters.argument !== undefined && parameters.property !== undefined) {

      } else if (parameters.argument !== undefined && parameters.property === undefined) {

      } else {
        console.error('Invalid values!');
        return false;
      };
    };
  };

  $.fn.cssBefore = function(argument, property) {
    setPseudoElement({
      elements: this,
      pseudoElement: 'before',
      argument: argument,
      property: property
    });
  };
})();

$(function() {
  // Случай 1
  $('.el0').cssBefore({
    'content': '"Новый \'before\'"',
    'color': 'green'
  });
  // Случай 2
  $('.el1').cssBefore({
    'content': '"Новый \'before\' №2"',
    'color': 'blue'
  });
  // Случай 3
  $('.el0').cssBefore({
    'content': '"Новый \'before\' №3"'
  });
});
.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element:before {
  content: "Старый 'before'";
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="element el0" name="MyName"></div>
<div class="element el0 el1" id="elem"></div>
<div>
  <div class="element el1"></div>
</div>

为什么在第三种情况下第一个元素被涂成蓝色?如何解决?


更新:

如果在每次赋值后将元素的值打印到控制台,那么就会出现非常奇怪的值:

(function () {
    var i = 1;

    var setPseudoElement = function (parameters) {
        for (var element of parameters.elements.get()) {
            if (!element.pseudoElements) element.pseudoElements = {styleSheet: null, before: {index: null, properties: null}, after: {index: null, properties: null}};
            
            var selector = (function () {
                if (element.id) {
                    return '#' + element.id + '::' + parameters.pseudoElement;
                } else {
                    var parentsList = $(element).parents().map(function () {
                        return this.tagName.toLowerCase();
                    }).get().reverse().join(' > ') + ' > ' + element.tagName.toLowerCase();

                    var elementClass = element.classList.length ? '.' + $(element.classList).get().join('.') : '';

                    var elementAttributes = element.hasAttributes() ? $(element.attributes).get().map(function (className) {
                        return className.nodeName !== 'class' ? className.nodeValue ? '[' + className.nodeName + '="' + className.nodeValue + '"]' : '[' + className.nodeName + '"]' : '';
                    }).join('') : '';

                    var elementNthChild = ':nth-child(' + ($(element).index() + 1) + ')';

                    return parentsList + elementClass + elementAttributes + elementNthChild + '::' + parameters.pseudoElement;
                };
            })();

            if (!element.pseudoElements.styleSheet) {
                if (document.styleSheets[0]) {
                    element.pseudoElements.styleSheet = document.styleSheets[0];
                } else {
                    var styleSheet = document.createElement('style');

                    document.head.appendChild(styleSheet);
                    element.pseudoElements.styleSheet = styleSheet.sheet;
                };
            };

            if (element.pseudoElements[parameters.pseudoElement].properties !== null && element.pseudoElements[parameters.pseudoElement].index !== null) {
                element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
            };

            if (typeof parameters.argument === 'object') {
                if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
                    var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length ||  element.pseudoElements.styleSheet.length;

                    element.pseudoElements[parameters.pseudoElement].index = newIndex;
                    element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
                };

                var properties = '';

                for (var property in parameters.argument) {
                    element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
                };

                for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
                    properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
                };

                element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
            
                console.log('Номер запуска: ' + Math.round(i / 2) + '; Номер присваивания элементу: ' + i);
                console.log({
                    'Элемент 1': $('.el0:not(.el1)').get(0).pseudoElements,
                    'Элемент 2': $('.el0.el1').get(0).pseudoElements,
                    'Элемент 3': $('.el1:not(.el0)').get(0).pseudoElements
                });
                i++;
            } else if (parameters.argument !== undefined && parameters.property !== undefined) {

            } else if (parameters.argument !== undefined && parameters.property === undefined) {

            } else {
                console.error('Invalid values!');
                return false;
            };
        };
    };

    $.fn.cssBefore = function (argument, property) {
        setPseudoElement ({
            elements: this, 
            pseudoElement: 'before', 
            argument: argument, 
            property: property
        });
    };
})();

$(function() {
  // Случай 1
  $('.el0').cssBefore({
    'content': '"Новый \'before\'"',
    'color': 'green'
  });
  // Случай 2
  $('.el1').cssBefore({
    'content': '"Новый \'before\' №2"',
    'color': 'blue'
  });
  // Случай 3
  $('.el0').cssBefore({
    'content': '"Новый \'before\' №3"'
  });
});
.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element:before {
  content: "Старый 'before'";
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="element el0" name="MyName"></div>
<div class="element el0 el1" id="elem"></div>
<div>
  <div class="element el1"></div>
</div>

如果您查看控制台,那么在第一次调用该函数时,1 号元素为蓝色,3 号内容

javascript
  • 2 个回答
  • 10 Views
Martin Hope
YourDeveloper
Asked: 2020-07-30 20:09:11 +0000 UTC

如何为选择制作占位符

  • 9

如何做到这一点,例如США,当您选择时,单词会Выбранная страна保留下来。也就是说Выбранная страна:,无论选择哪个国家,它们都必须始终在内部。

<select name="country">
  <option value disabled selected>Выбранная страна: Россия</option>
  <option>Россия</option>
  <option>США</option>
  <option>Турция</option>
  <option>Китай</option>
</select>

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Prorok
Asked: 2020-07-29 17:35:35 +0000 UTC

如何通过坐标在Canvas上找到一个物体并移动它?

  • 9

在界面上,中间有一个按钮,周围是Image类型的元素。它看起来像一个 3 x 3 的正方形。当您单击该按钮时,周围的图像应随着每次单击移动一个单元格。比如位于(我用二维数组的语言解释)的图片,它位于距离按钮1 0位置,应该移动到位置0 0,另一张图片从位置0 0移动到位置0 1。

使用这种方法:

image10.BeginAnimation(MarginProperty, new ThicknessAnimation
{
    From = new Thickness(99, 66, 361, 212),
    To = new Thickness(99, 24, 361, 254),
    Duration = TimeSpan.FromSeconds(0.85)
});

我设法在第二次点击之前执行了这样的操作。第二次点击后,图片返回到它们的初始位置并重复第一次点击的动作,但每次点击都必须没有误入歧途,图片会移动一圈。要实现这种方式,我意识到严格访问元素是不可能的,因为我上面写的就出来了。所以问题是,如何在 C# 代码中使用坐标来引用位于给定位置的对象并将其动画化到另一个位置?正如我在 Internet 上阅读的那样,为了搜索和移动,所有对象都必须位于画布上。但是,我会马上说我尝试使用这种方法获取坐标。

Canvas.SetLeft(image10, 0);
Canvas.SetTop(image10, 0);

但是使用这种方式,附加运动动画是行不通的,很重要。

PS 如果您提出一种更简单的方法来实现这个想法,我将不胜感激。

c#
  • 1 个回答
  • 10 Views
Martin Hope
Adam Shakhabov
Asked: 2020-07-27 03:25:28 +0000 UTC

重复检查 null

  • 9

其中一种业务逻辑方法以验证代码开头:

public void Update(ProductDto dto)
{
    if (dto == null)
    {
        throw new ArgumentNullException(nameof(dto));
    }

    var validContext = new ValidationContext(dto);
    Validator.ValidateObject(dto, validContext);     

    //...
}

如果它被传递给方法null,那么我将抛出一个标准异常ArgumentNullException,并且如您所见,我不会发送任何附加信息。

在我看来,测试块是null 多余的,因为在这种情况下,它dto = null后面的表达式 无论如何都会抛出相同的异常:var validContext = new ValidationContext(dto)

在此处输入图像描述


如果我这样缩短方法,“实践良好的设计”会发誓吗?

public void Update(ProductDto dto)
{
    var validContext = new ValidationContext(dto);
    Validator.ValidateObject(dto, validContext);  

    //...
}
c#
  • 2 个回答
  • 10 Views
Martin Hope
Egor Trutnev
Asked: 2020-07-18 18:46:00 +0000 UTC

wpf 的样式关闭/最小化按钮

  • 9

该应用程序具有标准的最小化和关闭按钮。但他们不适合我。您需要制作自己的按钮。设置任务以制作具有透明背景的按钮。

应该是这样的:

在此处输入图像描述

当光标悬停时,背景颜色和图标发生变化:

在此处输入图像描述

开始做这样的实施:

<Window x:Class="ProgramProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ProgramProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="421" Width="425" ResizeMode="NoResize" Background="{x:Null}" WindowStyle="None">
    <Grid>
        <Border CornerRadius="12">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#2e75b6" Offset="0.5" />
                    <GradientStop Color="#1f4e79" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="60" Stroke="Black" Opacity="0" VerticalAlignment="Top" Width="425" MouseLeftButtonDown="Rectangle1_PreviewMouseLeftButtonDown">
        <Grid Height="20" Margin="382,10,23,0" VerticalAlignment="Top" MouseDown="Grid1_MouseDown" >
            <Button Opacity="0" Content="" HorizontalAlignment="Left" Margin="-13,-10,-12,-8" VerticalAlignment="Top" Width="45" Height="38"/>
            <Path  Stretch="Fill" Fill="#FFFFFF" Data="F1 M 25.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " Margin="3.5,3.5,3.5,4.5"/>
        </Grid>
    </Grid>
</Window>

但是,由于我是 wpf 的新手,所以我有几个问题:

  1. 有没有比用代码画十字和棍子更简单的方法呢?也许这些按钮已经存在?
  2. 如何一次对 2 个对象执行样式更改?Internet 上有更改悬停按钮背景颜色的示例,但这些示例是悬停在按钮上的。在我的例子中,悬停可以触摸到按钮上的图标,而不是指针将在按钮后面的事实。
  3. 我做得对吗?将按钮和图标放在网格中?

我不希望任何人做出现成的示例(尽管我真的很感激一种实现的简单方法)。对我来说最主要的是被推上正确的道路,解释问题。

wpf
  • 1 个回答
  • 10 Views
上一页
下一页

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5